이 예제는 과거 `getStaticProps`와 `getStaticPaths`를 구현한 예제다.
`getStaticPaths`는 `generateStaticParams`으로 대체되었으며, 데이터를
불러오는 것은 `fetch`를 사용하는 것으로 동일하다. 최초 빌드시에 미리
데이터를 불러오고, 이후 재요청이 있으면 계속 해당 데이터를 사용한다.
미리 빌드된 페이지를 확인하고 싶다면, `./next/server/app/ssg`로
이동해서 확인해보면 된다. 미리 빌드된 html 파일이 준비되어 있을
것이다.
)
}
================================================
FILE: chapter11/next13/src/components/components.ts
================================================
'use client'
import styled from 'styled-components'
export const Container = styled.div`
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem /* 24px */;
`
export const SkeletonInner = styled.div`
padding: 1rem /* 16px */;
background-color: rgb(24 24 27 / 0.8);
border-radius: 1rem /* 16px */;
`
export const SkeletonImg = styled.div`
height: 3.5rem /* 56px */;
border-radius: 0.5rem /* 8px */;
background-color: rgb(63 63 70 / 1);
`
export const SkeletonBtn = styled.div`
margin-top: 0.75rem /* 12px */;
width: 25%;
height: 0.75rem /* 12px */;
border-radius: 0.5rem /* 8px */;
background-color: rgb(255 0 128 / 1);
`
export const SkeletonLineOne = styled.div`
margin-top: 0.75rem /* 12px */;
height: 0.75rem /* 12px */;
width: 91.666667%;
border-radius: 0.5rem /* 8px */;
background-color: rgb(63 63 70 / 1);
`
export const SkeletonLineTwo = styled.div`
margin-top: 0.75rem /* 12px */;
height: 0.75rem /* 12px */;
width: 66.666667%;
border-radius: 0.5rem /* 8px */;
background-color: rgb(63 63 70 / 1);
`
================================================
FILE: chapter11/next13/src/components/server-action/client-component.tsx
================================================
'use client'
import { useCallback, useTransition } from 'react'
import { updateData } from '#server-action'
import { SkeletonBtn } from '#components/components'
export function ClientButtonComponent({ id }: { id: string }) {
const [isPending, startTransition] = useTransition()
const handleClick = useCallback(() => {
startTransition(() => updateData(id, { name: '기본값', age: 0 }))
}, [])
return isPending ? (
) : (
)
}
================================================
FILE: chapter11/next13/src/constant/menu.ts
================================================
export interface Item {
name: string
slug: string
description: string
}
export const demos: Array<{ name: string; items: Item[] }> = [
{
name: 'Layouts',
items: [
{
name: 'Nested Layouts',
slug: 'layouts',
description: '중첩 레이아웃 - 주소에 따라 적용할 수 있는 레이아웃',
},
{
name: 'Grouped Layouts',
slug: 'grouped-layouts',
description:
'그룹 레이아웃 - 주소에 영향을 미치지 않고 특정 주소에 따라 그룹화',
},
],
},
{
name: 'File Conventions',
items: [
{
name: 'loading.js',
slug: 'loading',
description:
'데이터를 불러오거나 렌더링하는 동안 표시할 수 있는 로딩 컴포넌트',
},
{
name: 'error.js',
slug: 'error',
description: '에러 발생시 렌더링할 수 있는 에러 컴포넌트',
},
{
name: 'head.js',
slug: 'head',
description: 'URL에 따라 보여줄 수 있는 head',
},
],
},
{
name: 'Data Fetching',
items: [
{
name: 'Static-Site Generation',
slug: 'ssg',
description: '기존 getStaticProps을 nextjs@13에서 구현하는 방법',
},
{
name: 'Server-Side Rendering',
slug: 'ssr',
description: '기존 `getServerSideProps`를 nextjs@13에서 구현하는 방법',
},
{
name: 'Incremental Static Regeneration',
slug: 'isr',
description: '기존 `getStaticProps`와 revalidate 옵션을 구현하는 방법',
},
{
name: 'Streaming with Suspense',
slug: 'streaming',
description: 'React Suspense를 활용한 서버 스트리밍 데이터 불러오기',
},
],
},
{
name: 'Components',
items: [
{
name: 'Client context',
slug: 'context',
description:
'`Context`는 상태를 가지고 있으므로 반드시 클라이언트 컴포넌트여야 한다.',
},
],
},
{
name: 'Styles',
items: [
{
name: 'CSS and CSS-in-JS',
slug: 'styles',
description: '스타일을 적용하는 다양한 방법',
},
],
},
{
name: 'Server Action',
items: [
{
name: 'form action',
slug: 'server-action/form',
description: '서버액션을 form과 함께 사용해보기',
},
{
name: 'form action with data',
slug: 'server-action/form/1',
description: '서버액션을 form과 데이터를 기반으로 사용해보기',
},
{
name: 'form action with useTransition',
slug: 'server-action/start-transition/1',
description: '서버액션을 useTransition과 함께 사용해보기',
},
],
},
]
================================================
FILE: chapter11/next13/src/context/counter.tsx
================================================
'use client'
import {
createContext,
Dispatch,
SetStateAction,
useState,
useContext,
ReactNode,
} from 'react'
const CounterContext = createContext<
[number, Dispatch>] | undefined
>(undefined)
export function CounterProvider({ children }: { children: ReactNode }) {
const [count, setCount] = useState(0)
return (
{children}
)
}
export function useCounter() {
const context = useContext(CounterContext)
if (context === undefined) {
throw new Error('useCounter must be used within a CounterProvider')
}
return context
}
================================================
FILE: chapter11/next13/src/lib/utils.ts
================================================
export async function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
================================================
FILE: chapter11/next13/src/server-action/index.ts
================================================
'use server'
import kv from '@vercel/kv'
import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers'
export async function updateData(
id: string,
data: { name: string; age: number },
) {
const key = `test:${id}`
await kv.set(key, {
name: data.name,
age: data.age,
})
revalidatePath(`/server-action/form/${id}`)
}
================================================
FILE: chapter11/next13/src/services/constant.ts
================================================
export const API_URL_BASE = process.env.VERCEL_URL
? 'https://' + process.env.VERCEL_URL
: 'http://localhost:3000'
================================================
FILE: chapter11/next13/src/services/server.ts
================================================
interface User {
id: number
name: string
email: string
address: {
street: string
suite: string
city: string
zipcode: string
geo: {
lat: string
lng: string
}
}
phone: string
website: string
company: {
name: string
catchPhrase: string
bs: string
}
}
export async function fetchUsers(): Promise> {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const result: Array = await response.json()
return result
}
export async function fetchUserById(id: string | number): Promise {
const response = await fetch(
`https://jsonplaceholder.typicode.com/users/${id}`,
)
const result: User = await response.json()
return result
}
interface Todo {
userId: number
id: number
title: string
completed: boolean
}
export async function fetchTodos(): Promise> {
const response = await fetch('https://jsonplaceholder.typicode.com/todos')
const result: Array = await response.json()
return result
}
interface Post {
userId: number
id: number
title: string
body: string
}
export async function fetchPosts(): Promise> {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const result: Array = await response.json()
return result
}
export async function fetchPostById(
id: number | string,
options?: RequestInit,
): Promise {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${id}`,
options,
)
const result: Post = await response.json()
return result
}
================================================
FILE: chapter11/next13/tailwind.config.js
================================================
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
future: {
hoverOnlyWhenSupported: true,
},
theme: {
extend: {
colors: {
gray: colors.zinc,
'gray-1000': 'rgb(17,17,19)',
'gray-1100': 'rgb(10,10,11)',
vercel: {
pink: '#FF0080',
blue: '#0070F3',
cyan: '#50E3C2',
orange: '#F5A623',
violet: '#7928CA',
},
},
backgroundImage: ({ theme }) => ({
'vc-border-gradient': `radial-gradient(at left top, ${theme(
'colors.gray.500',
)}, 50px, ${theme('colors.gray.800')} 50%)`,
}),
keyframes: ({ theme }) => ({
rerender: {
'0%': {
'border-color': theme('colors.vercel.pink'),
},
'40%': {
'border-color': theme('colors.vercel.pink'),
},
},
highlight: {
'0%': {
background: theme('colors.vercel.pink'),
color: theme('colors.white'),
},
'40%': {
background: theme('colors.vercel.pink'),
color: theme('colors.white'),
},
},
shimmer: {
'100%': {
transform: 'translateX(100%)',
},
},
translateXReset: {
'100%': {
transform: 'translateX(0)',
},
},
fadeToTransparent: {
'0%': {
opacity: 1,
},
'40%': {
opacity: 1,
},
'100%': {
opacity: 0,
},
},
}),
},
},
}
================================================
FILE: chapter11/next13/tsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#app/*": ["app/*"],
"#components/*": ["src/components/*"],
"#constant/*": ["src/constant/*"],
"#context/*": ["src/context/*"],
"#lib/*": ["src/lib/*"],
"#server-action/*": ["src/server-action/*"],
"#server-action": ["src/server-action/index.ts"],
"#services/*": ["src/services/*"]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
================================================
FILE: chapter11/server-components-demo/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
/dist
# notes
notes/*.md
# misc
.DS_Store
.eslintcache
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# vscode
.vscode
================================================
FILE: chapter11/server-components-demo/.nvmrc
================================================
lts/hydrogen
================================================
FILE: chapter11/server-components-demo/.prettierignore
================================================
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
/dist
# misc
.DS_Store
.eslintcache
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
*.html
*.json
*.md
================================================
FILE: chapter11/server-components-demo/.prettierrc.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';
module.exports = {
arrowParens: 'always',
bracketSpacing: false,
singleQuote: true,
jsxBracketSameLine: true,
trailingComma: 'es5',
printWidth: 80,
};
================================================
FILE: chapter11/server-components-demo/CODE_OF_CONDUCT.md
================================================
# Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at . All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: chapter11/server-components-demo/Dockerfile
================================================
FROM node:lts-hydrogen
WORKDIR /opt/notes-app
COPY package.json package-lock.json ./
RUN npm install --legacy-peer-deps
COPY . .
ENTRYPOINT [ "npm", "run" ]
CMD [ "start" ]
================================================
FILE: chapter11/server-components-demo/LICENSE
================================================
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: chapter11/server-components-demo/README.md
================================================
# Demo of sever components
https://github.com/reactjs/server-components-demo 프로젝트의 일부 불필요한 내용을 제거하고 간단하게 변경한 프로젝트입니다.
## 프로젝트 구조
TBD
## 실행하기
### 빠르게 실행하기
- 데이터 생성하기
- `docker-compose up -d` 로 detach 모드로 실행
- `docker-compose exec notes-app npm run seed`로 데이터 생성
- 애플리케이션 실행하기
- `docker-compose up`
================================================
FILE: chapter11/server-components-demo/credentials.js
================================================
module.exports = {
host: process.env.DB_HOST || 'localhost',
database: 'notesapi',
user: 'notesadmin',
password: 'password',
port: '5432',
};
================================================
FILE: chapter11/server-components-demo/docker-compose.yml
================================================
version: "3.8"
services:
postgres:
image: postgres:13
environment:
POSTGRES_USER: notesadmin
POSTGRES_PASSWORD: password
POSTGRES_DB: notesapi
ports:
- '5432:5432'
volumes:
- ./scripts/init_db.sh:/docker-entrypoint-initdb.d/init_db.sh
- db:/var/lib/postgresql/data
notes-app:
build:
context: .
depends_on:
- postgres
ports:
- '4000:4000'
environment:
DB_HOST: postgres
PORT: 4000
volumes:
- ./notes:/opt/notes-app/notes
- ./public:/opt/notes-app/public
- ./scripts:/opt/notes-app/scripts
- ./server:/opt/notes-app/server
- ./src:/opt/notes-app/src
- ./credentials.js:/opt/notes-app/credentials.js
volumes:
db:
================================================
FILE: chapter11/server-components-demo/notes/.gitkeep
================================================
================================================
FILE: chapter11/server-components-demo/package.json
================================================
{
"name": "react-notes",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=14.9.0"
},
"license": "MIT",
"dependencies": {
"@babel/core": "7.21.3",
"@babel/plugin-transform-modules-commonjs": "^7.21.2",
"@babel/preset-react": "^7.18.6",
"@babel/register": "^7.21.0",
"acorn-jsx": "^5.3.2",
"acorn-loose": "^8.3.0",
"babel-loader": "8.3.0",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"date-fns": "^2.29.3",
"excerpts": "^0.0.3",
"express": "^4.18.2",
"html-webpack-plugin": "5.5.0",
"marked": "^4.2.12",
"nodemon": "^2.0.21",
"pg": "^8.10.0",
"react": "18.3.0-next-1308e49a6-20230330",
"react-dom": "18.3.0-next-1308e49a6-20230330",
"react-error-boundary": "^4.0.9",
"react-server-dom-webpack": "18.3.0-next-1308e49a6-20230330",
"resolve": "1.22.1",
"rimraf": "^4.4.0",
"sanitize-html": "^2.10.0",
"server-only": "^0.0.1",
"webpack": "5.76.2"
},
"devDependencies": {
"cross-env": "^7.0.3",
"prettier": "1.19.1"
},
"scripts": {
"start": "concurrently \"npm run server:dev\" \"npm run bundler:dev\"",
"start:prod": "concurrently \"npm run server:prod\" \"npm run bundler:prod\"",
"server:dev": "cross-env NODE_ENV=development nodemon -- --conditions=react-server server",
"server:prod": "cross-env NODE_ENV=production nodemon -- --conditions=react-server server",
"bundler:dev": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
"bundler:prod": "cross-env NODE_ENV=production nodemon -- scripts/build.js",
"prettier": "prettier --write **/*.js",
"seed": "node ./scripts/seed.js"
},
"babel": {
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
},
"nodemonConfig": {
"ignore": [
"build/*"
]
},
"overrides": {
"react": "18.3.0-next-1308e49a6-20230330",
"react-dom": "18.3.0-next-1308e49a6-20230330"
}
}
================================================
FILE: chapter11/server-components-demo/public/index.html
================================================
React Notes
================================================
FILE: chapter11/server-components-demo/public/style.css
================================================
/* -------------------------------- CSSRESET --------------------------------*/
/* CSS Reset adapted from https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-block-start: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* -------------------------------- /CSSRESET --------------------------------*/
:root {
/* Colors */
--main-border-color: #ddd;
--primary-border: #037dba;
--gray-20: #404346;
--gray-60: #8a8d91;
--gray-70: #bcc0c4;
--gray-80: #c9ccd1;
--gray-90: #e4e6eb;
--gray-95: #f0f2f5;
--gray-100: #f5f7fa;
--primary-blue: #037dba;
--secondary-blue: #0396df;
--tertiary-blue: #c6efff;
--flash-blue: #4cf7ff;
--outline-blue: rgba(4, 164, 244, 0.6);
--navy-blue: #035e8c;
--red-25: #bd0d2a;
--secondary-text: #65676b;
--white: #fff;
--yellow: #fffae1;
--outline-box-shadow: 0 0 0 2px var(--outline-blue);
--outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);
/* Fonts */
--sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
Ubuntu, Helvetica, sans-serif;
--monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
monospace;
}
html {
font-size: 100%;
}
body {
font-family: var(--sans-serif);
background: var(--gray-100);
font-weight: 400;
line-height: 1.75;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-weight: 700;
line-height: 1.3;
}
h1 {
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text_small {
font-size: 0.8rem;
}
pre,
code {
font-family: var(--monospace);
border-radius: 6px;
}
pre {
background: var(--gray-95);
padding: 12px;
line-height: 1.5;
}
code {
background: var(--yellow);
padding: 0 3px;
font-size: 0.94rem;
word-break: break-word;
}
pre code {
background: none;
}
a {
color: var(--primary-blue);
}
.text-with-markdown h1,
.text-with-markdown h2,
.text-with-markdown h3,
.text-with-markdown h4,
.text-with-markdown h5 {
margin-block: 2rem 0.7rem;
margin-inline: 0;
}
.text-with-markdown blockquote {
font-style: italic;
color: var(--gray-20);
border-left: 3px solid var(--gray-80);
padding-left: 10px;
}
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* ---------------------------------------------------------------------------*/
.main {
display: flex;
height: 100vh;
width: 100%;
overflow: hidden;
}
.col {
height: 100%;
}
.col:last-child {
flex-grow: 1;
}
.logo {
height: 20px;
width: 22px;
margin-inline-end: 10px;
}
.edit-button {
border-radius: 100px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 20px 8px;
cursor: pointer;
font-weight: 700;
outline-style: none;
}
.edit-button--solid {
background: var(--primary-blue);
color: var(--white);
border: none;
margin-inline-start: 6px;
transition: all 0.2s ease-in-out;
}
.edit-button--solid:hover {
background: var(--secondary-blue);
}
.edit-button--solid:focus {
box-shadow: var(--outline-box-shadow-contrast);
}
.edit-button--outline {
background: var(--white);
color: var(--primary-blue);
border: 1px solid var(--primary-blue);
margin-inline-start: 12px;
transition: all 0.1s ease-in-out;
}
.edit-button--outline:disabled {
opacity: 0.5;
}
.edit-button--outline:hover:not([disabled]) {
background: var(--primary-blue);
color: var(--white);
}
.edit-button--outline:focus {
box-shadow: var(--outline-box-shadow);
}
ul.notes-list {
padding: 16px 0;
}
.notes-list > li {
padding: 0 16px;
}
.notes-empty {
padding: 16px;
}
.sidebar {
background: var(--white);
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
overflow-y: scroll;
z-index: 1000;
flex-shrink: 0;
max-width: 350px;
min-width: 250px;
width: 30%;
}
.sidebar-header {
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 36px 16px 16px;
display: flex;
align-items: center;
}
.sidebar-menu {
padding: 0 16px 16px;
display: flex;
justify-content: space-between;
}
.sidebar-menu > .search {
position: relative;
flex-grow: 1;
}
.sidebar-note-list-item {
position: relative;
margin-bottom: 12px;
padding: 16px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
max-height: 100px;
transition: max-height 250ms ease-out;
transform: scale(1);
}
.sidebar-note-list-item.note-expanded {
max-height: 300px;
transition: max-height 0.5s ease;
}
.sidebar-note-list-item.flash {
animation-name: flash;
animation-duration: 0.6s;
}
.sidebar-note-open {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 0;
border: none;
border-radius: 6px;
text-align: start;
background: var(--gray-95);
cursor: pointer;
outline-style: none;
color: transparent;
font-size: 0px;
}
.sidebar-note-open:focus {
box-shadow: var(--outline-box-shadow);
}
.sidebar-note-open:hover {
background: var(--gray-90);
}
.sidebar-note-header {
z-index: 1;
max-width: 85%;
pointer-events: none;
}
.sidebar-note-header > strong {
display: block;
font-size: 1.25rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-note-toggle-expand {
z-index: 2;
border-radius: 50%;
height: 24px;
border: 1px solid var(--gray-60);
cursor: pointer;
flex-shrink: 0;
visibility: hidden;
opacity: 0;
cursor: default;
transition: visibility 0s linear 20ms, opacity 300ms;
outline-style: none;
}
.sidebar-note-toggle-expand:focus {
box-shadow: var(--outline-box-shadow);
}
.sidebar-note-open:hover + .sidebar-note-toggle-expand,
.sidebar-note-open:focus + .sidebar-note-toggle-expand,
.sidebar-note-toggle-expand:hover,
.sidebar-note-toggle-expand:focus {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
.sidebar-note-toggle-expand img {
width: 10px;
height: 10px;
}
.sidebar-note-excerpt {
pointer-events: none;
z-index: 2;
flex: 1 1 250px;
color: var(--secondary-text);
position: relative;
animation: slideIn 100ms;
}
.search input {
padding: 0 16px;
border-radius: 100px;
border: 1px solid var(--gray-90);
width: 100%;
height: 100%;
outline-style: none;
}
.search input:focus {
box-shadow: var(--outline-box-shadow);
}
.search .spinner {
position: absolute;
right: 10px;
top: 10px;
}
.note-viewer {
display: flex;
align-items: center;
justify-content: center;
}
.note {
background: var(--white);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 8px;
height: 95%;
width: 95%;
min-width: 400px;
padding: 8%;
overflow-y: auto;
}
.note--empty-state {
margin-inline: 20px 20px;
}
.note-text--empty-state {
font-size: 1.5rem;
}
.note-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap-reverse;
margin-inline-start: -12px;
}
.note-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.note-title {
line-height: 1.3;
flex-grow: 1;
overflow-wrap: break-word;
margin-inline-start: 12px;
}
.note-updated-at {
color: var(--secondary-text);
white-space: nowrap;
margin-inline-start: 12px;
}
.note-preview {
margin-block-start: 50px;
}
.note-editor {
background: var(--white);
display: flex;
height: 100%;
width: 100%;
padding: 58px;
overflow-y: auto;
}
.note-editor .label {
margin-bottom: 20px;
}
.note-editor-form {
display: flex;
flex-direction: column;
width: 400px;
flex-shrink: 0;
position: sticky;
top: 0;
}
.note-editor-form input,
.note-editor-form textarea {
background: none;
border: 1px solid var(--gray-70);
border-radius: 2px;
font-family: var(--monospace);
font-size: 0.8rem;
padding: 12px;
outline-style: none;
}
.note-editor-form input:focus,
.note-editor-form textarea:focus {
box-shadow: var(--outline-box-shadow);
}
.note-editor-form input {
height: 44px;
margin-bottom: 16px;
}
.note-editor-form textarea {
height: 100%;
max-width: 400px;
}
.note-editor-menu {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 12px;
}
.note-editor-preview {
margin-inline-start: 40px;
width: 100%;
}
.note-editor-done,
.note-editor-delete {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 100px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 20px 8px;
cursor: pointer;
font-weight: 700;
margin-inline-start: 12px;
outline-style: none;
transition: all 0.2s ease-in-out;
}
.note-editor-done:disabled,
.note-editor-delete:disabled {
opacity: 0.5;
}
.note-editor-done {
border: none;
background: var(--primary-blue);
color: var(--white);
}
.note-editor-done:focus {
box-shadow: var(--outline-box-shadow-contrast);
}
.note-editor-done:hover:not([disabled]) {
background: var(--secondary-blue);
}
.note-editor-delete {
border: 1px solid var(--red-25);
background: var(--white);
color: var(--red-25);
}
.note-editor-delete:focus {
box-shadow: var(--outline-box-shadow);
}
.note-editor-delete:hover:not([disabled]) {
background: var(--red-25);
color: var(--white);
}
/* Hack to color our svg */
.note-editor-delete:hover:not([disabled]) img {
filter: grayscale(1) invert(1) brightness(2);
}
.note-editor-done > img {
width: 14px;
}
.note-editor-delete > img {
width: 10px;
}
.note-editor-done > img,
.note-editor-delete > img {
margin-inline-end: 12px;
}
.note-editor-done[disabled],
.note-editor-delete[disabled] {
opacity: 0.5;
}
.label {
display: inline-block;
border-radius: 100px;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 14px;
}
.label--preview {
background: rgba(38, 183, 255, 0.15);
color: var(--primary-blue);
}
.text-with-markdown p {
margin-bottom: 16px;
}
.text-with-markdown img {
width: 100%;
}
/* https://codepen.io/mandelid/pen/vwKoe */
.spinner {
display: inline-block;
transition: opacity linear 0.1s 0.2s;
width: 20px;
height: 20px;
border: 3px solid rgba(80, 80, 80, 0.5);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
opacity: 0;
}
.spinner--active {
opacity: 1;
}
.skeleton::after {
content: 'Loading...';
}
.skeleton {
height: 100%;
background-color: #eee;
background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
background-size: 200px 100%;
background-repeat: no-repeat;
border-radius: 4px;
display: block;
line-height: 1;
width: 100%;
animation: shimmer 1.2s ease-in-out infinite;
color: transparent;
}
.skeleton:first-of-type {
margin: 0;
}
.skeleton--button {
border-radius: 100px;
padding: 6px 20px 8px;
width: auto;
}
.v-stack + .v-stack {
margin-block-start: 0.8em;
}
.offscreen {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
position: absolute;
}
/* ---------------------------------------------------------------------------*/
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
@keyframes slideIn {
0% {
top: -10px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes flash {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
100% {
transform: scale(1);
opacity: 1;
}
}
================================================
FILE: chapter11/server-components-demo/scripts/build.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';
const path = require('path');
const rimraf = require('rimraf');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactServerWebpackPlugin = require('react-server-dom-webpack/plugin');
const isProduction = process.env.NODE_ENV === 'production';
rimraf.sync(path.resolve(__dirname, '../build'));
webpack(
{
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
entry: [path.resolve(__dirname, '../src/framework/bootstrap.js')],
output: {
path: path.resolve(__dirname, '../build'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(__dirname, '../public/index.html'),
}),
new ReactServerWebpackPlugin({isServer: false}),
],
},
(err, stats) => {
if (err) {
console.error(err.stack || err);
if (err.details) {
console.error(err.details);
}
process.exit(1);
return;
}
const info = stats.toJson();
if (stats.hasErrors()) {
console.log('Finished running webpack with errors.');
info.errors.forEach((e) => console.error(e));
process.exit(1);
} else {
console.log('Finished running webpack.');
}
}
);
================================================
FILE: chapter11/server-components-demo/scripts/init_db.sh
================================================
#!/bin/bash
set -e
psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-EOSQL
DROP TABLE IF EXISTS notes;
CREATE TABLE notes (
id SERIAL PRIMARY KEY,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP NOT NULL,
title TEXT,
body TEXT
);
EOSQL
================================================
FILE: chapter11/server-components-demo/scripts/seed.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';
const fs = require('fs');
const path = require('path');
const {Pool} = require('pg');
const {readdir, unlink, writeFile} = require('fs/promises');
const startOfYear = require('date-fns/startOfYear');
const credentials = require('../credentials');
const NOTES_PATH = './notes';
const pool = new Pool(credentials);
const now = new Date();
const startOfThisYear = startOfYear(now);
// Thanks, https://stackoverflow.com/a/9035732
function randomDateBetween(start, end) {
return new Date(
start.getTime() + Math.random() * (end.getTime() - start.getTime())
);
}
const dropTableStatement = 'DROP TABLE IF EXISTS notes;';
const createTableStatement = `CREATE TABLE notes (
id SERIAL PRIMARY KEY,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP NOT NULL,
title TEXT,
body TEXT
);`;
const insertNoteStatement = `INSERT INTO notes(title, body, created_at, updated_at)
VALUES ($1, $2, $3, $3)
RETURNING *`;
const seedData = [
[
'Meeting Notes',
'This is an example note. It contains **Markdown**!',
randomDateBetween(startOfThisYear, now),
],
[
'Make a thing',
`It's very easy to make some words **bold** and other words *italic* with
Markdown. You can even [link to React's website!](https://www.reactjs.org).`,
randomDateBetween(startOfThisYear, now),
],
[
'A note with a very long title because sometimes you need more words',
`You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)
notes in this app! These note live on the server in the \`notes\` folder.
`,
randomDateBetween(startOfThisYear, now),
],
['I wrote this note today', 'It was an excellent note.', now],
];
async function seed() {
await pool.query(dropTableStatement);
await pool.query(createTableStatement);
const res = await Promise.all(
seedData.map((row) => pool.query(insertNoteStatement, row))
);
const oldNotes = await readdir(path.resolve(NOTES_PATH));
await Promise.all(
oldNotes
.filter((filename) => filename.endsWith('.md'))
.map((filename) => unlink(path.resolve(NOTES_PATH, filename)))
);
await Promise.all(
res.map(({rows}) => {
const id = rows[0].id;
const content = rows[0].body;
const data = new Uint8Array(Buffer.from(content));
return writeFile(path.resolve(NOTES_PATH, `${id}.md`), data, (err) => {
if (err) {
throw err;
}
});
})
);
}
seed();
================================================
FILE: chapter11/server-components-demo/server/api.server.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';
const register = require('react-server-dom-webpack/node-register');
register();
const babelRegister = require('@babel/register');
babelRegister({
ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
presets: [['@babel/preset-react', {runtime: 'automatic'}]],
plugins: ['@babel/transform-modules-commonjs'],
});
const express = require('express');
const compress = require('compression');
const {readFileSync} = require('fs');
const {unlink, writeFile} = require('fs').promises;
const {renderToPipeableStream} = require('react-server-dom-webpack/server');
const path = require('path');
const {Pool} = require('pg');
const React = require('react');
const ReactApp = require('../src/App').default;
// Don't keep credentials in the source tree in a real app!
const pool = new Pool(require('../credentials'));
const PORT = process.env.PORT || 4000;
const app = express();
app.use(compress());
app.use(express.json());
app
.listen(PORT, () => {
console.log(`React Notes listening at ${PORT}...`);
})
.on('error', function(error) {
if (error.syscall !== 'listen') {
throw error;
}
const isPipe = (portOrPipe) => Number.isNaN(portOrPipe);
const bind = isPipe(PORT) ? 'Pipe ' + PORT : 'Port ' + PORT;
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
});
function handleErrors(fn) {
return async function(req, res, next) {
try {
return await fn(req, res);
} catch (x) {
next(x);
}
};
}
app.get(
'/',
handleErrors(async function(_req, res) {
await waitForWebpack();
const html = readFileSync(
path.resolve(__dirname, '../build/index.html'),
'utf8'
);
// Note: this is sending an empty HTML shell, like a client-side-only app.
// However, the intended solution (which isn't built out yet) is to read
// from the Server endpoint and turn its response into an HTML stream.
res.send(html);
})
);
async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
const {pipe} = renderToPipeableStream(
React.createElement(ReactApp, props),
moduleMap
);
pipe(res);
}
function sendResponse(req, res, redirectToId) {
const location = JSON.parse(req.query.location);
if (redirectToId) {
location.selectedId = redirectToId;
}
res.set('X-Location', JSON.stringify(location));
renderReactTree(res, {
selectedId: location.selectedId,
isEditing: location.isEditing,
searchText: location.searchText,
});
}
app.get('/react', function(req, res) {
sendResponse(req, res, null);
});
const NOTES_PATH = path.resolve(__dirname, '../notes');
app.post(
'/notes',
handleErrors(async function(req, res) {
const now = new Date();
const result = await pool.query(
'insert into notes (title, body, created_at, updated_at) values ($1, $2, $3, $3) returning id',
[req.body.title, req.body.body, now]
);
const insertedId = result.rows[0].id;
await writeFile(
path.resolve(NOTES_PATH, `${insertedId}.md`),
req.body.body,
'utf8'
);
sendResponse(req, res, insertedId);
})
);
app.put(
'/notes/:id',
handleErrors(async function(req, res) {
const now = new Date();
const updatedId = Number(req.params.id);
await pool.query(
'update notes set title = $1, body = $2, updated_at = $3 where id = $4',
[req.body.title, req.body.body, now, updatedId]
);
await writeFile(
path.resolve(NOTES_PATH, `${updatedId}.md`),
req.body.body,
'utf8'
);
sendResponse(req, res, null);
})
);
app.delete(
'/notes/:id',
handleErrors(async function(req, res) {
await pool.query('delete from notes where id = $1', [req.params.id]);
await unlink(path.resolve(NOTES_PATH, `${req.params.id}.md`));
sendResponse(req, res, null);
})
);
app.get(
'/notes',
handleErrors(async function(_req, res) {
const {rows} = await pool.query('select * from notes order by id desc');
res.json(rows);
})
);
app.get(
'/notes/:id',
handleErrors(async function(req, res) {
const {rows} = await pool.query('select * from notes where id = $1', [
req.params.id,
]);
res.json(rows[0]);
})
);
app.get('/sleep/:ms', function(req, res) {
setTimeout(() => {
res.json({ok: true});
}, req.params.ms);
});
app.use(express.static('build'));
app.use(express.static('public'));
async function waitForWebpack() {
while (true) {
try {
readFileSync(path.resolve(__dirname, '../build/index.html'));
return;
} catch (err) {
console.log(
'Could not find webpack build output. Will retry in a second...'
);
await new Promise((resolve) => setTimeout(resolve, 1000));
}
}
}
================================================
FILE: chapter11/server-components-demo/server/package.json
================================================
{
"type": "commonjs",
"main": "./api.server.js"
}
================================================
FILE: chapter11/server-components-demo/src/App.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {Suspense} from 'react';
import Note from './Note';
import NoteList from './NoteList';
import EditButton from './EditButton';
import SearchField from './SearchField';
import NoteSkeleton from './NoteSkeleton';
import NoteListSkeleton from './NoteListSkeleton';
export default function App({selectedId, isEditing, searchText}) {
return (
React NotesNew}>
);
}
================================================
FILE: chapter11/server-components-demo/src/EditButton.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use client';
import {useTransition} from 'react';
import {useRouter} from './framework/router';
export default function EditButton({noteId, children}) {
const [isPending, startTransition] = useTransition();
const {navigate} = useRouter();
const isDraft = noteId == null;
return (
);
}
================================================
FILE: chapter11/server-components-demo/src/Note.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import {format} from 'date-fns';
// Uncomment if you want to read from a file instead.
// import {readFile} from 'fs/promises';
// import {resolve} from 'path';
import NotePreview from './NotePreview';
import EditButton from './EditButton';
import NoteEditor from './NoteEditor';
export default async function Note({selectedId, isEditing}) {
if (selectedId === null) {
if (isEditing) {
return (
);
} else {
return (
Click a note on the left to view something! 🥺
);
}
}
const noteResponse = await fetch(`http://localhost:4000/notes/${selectedId}`);
const note = await noteResponse.json();
let {id, title, body, updated_at} = note;
const updatedAt = new Date(updated_at);
// We could also read from a file instead.
// body = await readFile(resolve(`./notes/${note.id}.md`), 'utf8');
// Now let's see how the Suspense boundary above lets us not block on this.
// await fetch('http://localhost:4000/sleep/3000');
if (isEditing) {
return ;
} else {
return (
{title}
Last updated on {format(updatedAt, "d MMM yyyy 'at' h:mm bb")}
Edit
);
}
}
================================================
FILE: chapter11/server-components-demo/src/NoteEditor.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use client';
import {useState, useTransition} from 'react';
import {useRouter, useMutation} from './framework/router';
import NotePreview from './NotePreview';
export default function NoteEditor({noteId, initialTitle, initialBody}) {
const [title, setTitle] = useState(initialTitle);
const [body, setBody] = useState(initialBody);
const {location} = useRouter();
const [isNavigating, startNavigating] = useTransition();
const [isSaving, saveNote] = useMutation({
endpoint: noteId !== null ? `/notes/${noteId}` : `/notes`,
method: noteId !== null ? 'PUT' : 'POST',
});
const [isDeleting, deleteNote] = useMutation({
endpoint: `/notes/${noteId}`,
method: 'DELETE',
});
async function handleSave() {
const payload = {title, body};
const requestedLocation = {
selectedId: noteId,
isEditing: false,
searchText: location.searchText,
};
await saveNote(payload, requestedLocation);
}
async function handleDelete() {
const payload = {};
const requestedLocation = {
selectedId: null,
isEditing: false,
searchText: location.searchText,
};
await deleteNote(payload, requestedLocation);
}
const isDraft = noteId === null;
return (
React Notes