Правильно настройте React SSR с Parcel и Express

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

Например, репозиторий это использует 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 для экспресса, было бы здорово, если бы кто-нибудь поделился им здесь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
984
1

Ответы 1

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

Другие вопросы по теме