react-18-ssr - GitLite

KO | EN

gitlite — search

#javascript #python #typescript #go #android #linux #java #windows #awesome #awesome-list #security #pytorch #ios #openai

react-18-ssr

(★ 99)

Build react 18 + SSR from scratch 💪

파일 탐색기

최종 버전 다운로드 (.zip)

- cspell.json
- extensions.json
- settings.json
- app.css
- blob-sighing.gif
- blob-thinking.gif
- blob-waving.gif
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt
- - app.css
- - Html.tsx
  - NotFound.tsx
  - Result.tsx
- - index.tsx
  - thinking.tsx
- App.tsx
- AppRoutes.tsx
- index.tsx
.gitignore
.prettierrc
package.json
pnpm-lock.yaml
README.md
server.tsx
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/maxam2017/react-18-ssr

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-18-ssr

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React 18 + SSR 💪

After React v18 is published, I think it's time to build React app with server-side rendering (SSR) once with those new APIs. Before that, I always use Next.js when it comes to SSR.

## Caveat ⚠️

This code isn't production-ready. Use with caution.

## What's new

React v18 introduces new SSR Architecture. Thanks to the new Suspense API, the process of SSR isn't waterfall-like anymore. Below are two major unlocked SSR features:

✅ Streaming HTML

✅ Selective Hydration

Want to know more? See https://github.com/reactwg/react-18/discussions/37 for details.

## Concept

Why do we need SSR? It's an important and very common question in the interview.

In the past, the web app was always rendered on the server in the form of HTML, which someone called Multiple Page Application (MPA). When the user clicked a link, the browser made an HTTP request to the server and waits for receiving the HTML of the next page.

However, when some modern frontend library like React.js comes up, the web app becomes Single Page Application (SPA). What does this mean? It becomes static! We can route between different pages without making requests to the server because everything is bootstrapped on client side.

Although SPA has a better user experience, it doesn't SEO-friendly and also makes the first painting longer. To solve those problems, the concept of Universal App (Hybrid) comes up, it combines the benefit of MPA and SPA, using server side rendering and making client routing works. Sounds great right? Moreover, most famous frameworks, like Next.js (React.js framework), Nuxt.js (Vue.js framework), and Svelte Kit (Svelte.js framework) already use this way to implement web apps.

## Implementation

We need a node server to render dehydrated React elements and use ReactDOM.hydrate to make our DOM interactive. There're some steps listed below:

- setup a koa server (for rendering)
- use ReactDOMServer to dehydrate
  - renderToString
  - renderToPipeableStream (new in React v18 ✨)
- use ReactDOM.hydrate

To here, we have already built the React app with the easiest SSR.

More Features:

- Routing
  - react-router-dom (BrowserRoutes & StaticRoutes)
  - https://reactrouter.com/docs/en/v6/guides/ssr
- Code Splitting
  - the most basic way is using dynamic import because common bundler support chunking according this.
  - React.Suspense + React.lazy (`renderToPipeableStream` is required!)
  - https://reactjs.org/docs/code-splitting.html#code-splitting
- Fetch data
  - WIP...

## Links

- https://github.com/reactwg/react-18/discussions/22
- https://github.com/reactwg/react-18/discussions/114