Правильно настроить React SSR с помощью Parcel и Express.

Question

Я прочитал много уроков, посмотрел некоторые репозитории и все еще не получил то, что хотел.

Например, в этом репо используются Cheerio (серверный jQuery) и React Helmet.

Но я хочу настроить свое приложение только с Parcel, React, ReactDOM, React Router DOM и Express.

Я пытался визуализировать компоненты на сервере, но это не то, что я хочу. Я хочу использовать hydrate функция, но не знаю, как сделать это на сервере. server.js выглядел так, но здесь отображается только один компонент, но не что-нибудь еще:

import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from '../app/index'

const app = express()

app.get('/', (req, res) => {
    res.send(renderToString(<App/>))
})

Я взял это из учебников, но это только рендеринг приложения, но мне нужно много компонентов для рендеринга! Другими словами, мне просто нужно настроить React SSR с помощью Parcel.

Мои сценарии NPM для создания приложения:

   "build-client": "parcel app/index.html -d dist/client --port 3000",
   "build-server": "parcel server/index.js -d dist/server --target node",
   "run-server": "nodemon dist/server/index.js",
   "server": "run-s build-server run-server"

Будем рады видеть полное репо о том, как настроить React SSR без каких-либо дополнительных библиотек, кроме Express и Parcel, но если есть какой-либо плагин промежуточного программного обеспечения React SSR для Express, было бы здорово, если бы кто-то поделился им здесь.

Answer 1

Я рекомендую проверить Next.js . Это готовый к работе фреймворк, построенный на основе React & Express. Решает SSR из коробки с нулевым конфигом.