dev-ssr #41

AleksandrMenshchikov · 2023-03-29T19:50:03Z

Добавление SSR

vercel · 2023-03-29T19:50:08Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
uno-game-client	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 30, 2023 at 8:28PM (UTC)

…:only"

cap-Bernardito

По логике работы пока особо не могу сказать - не изучал эту тему на достаточном уровне.
То, что смог прокомментировать, прокомментировал.

cap-Bernardito · 2023-03-30T14:22:25Z

packages/client/index.html

  </head>
+  <script>window.initialState = <!--store-data-->;</script>
  <body>


Давай назовем, переменную window.__PRELOADED_STATE__ как в репозитории - примере.

Так понятно, что она приватная, ну и в коде выделяется.

window.initialState изменил на window.__PRELOADED_STATE__

cap-Bernardito · 2023-03-30T14:24:14Z

packages/client/package.json

+    "build:client": "rm -rf dist/client && vite build --outDir dist/client",
+    "build:server": "rm -rf dist/server && vite build --outDir dist/server --ssr src/entry-server.tsx",


Не во всех системах команда rf работает. Думаю, стоит заменить ее на rimraf или del из одноименных пакетов. Так получится 100% универсальное решение.

rm -rf изменил на rimraf

Нужно в дев зависимости добавить этот пакет

Установил пакет rimraf.

нужно в devDependencies его, он же только для сборки используется.

Переместил в devDependencies.

cap-Bernardito · 2023-03-30T14:25:53Z

packages/client/package.json

-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
+    "dev": "node server",


Есть иллюзия, что запуск сервера в клиентском пакете странно выглядит. У нас же есть папка server для разработки и запуска сервера.

Думаю лучше отделить frontend от backend, backend должен отвечать только за данные.

Ну я тут рассуждаю как. Забываем про js, представим кейс с роботами. Робот шлет get запрос на сервер (в данном случае к express), получает в ответ готовую html страницу. Разве это не данные? Про клиента он знать не знает. Ровно так же работает классический веб без SPA. Шлем запрос, получаем от сервера готовую HTML страницу.

Сейчас мы не можем пользователя получать из-за кук и текстовые данные в страницы захардкожены. Возможно по этой причине не выглядит, как сервер. Но замени текстовые данные на условно данные из БД (которые предварительно получишь в express же), добавь авторизацию пользователя, загрузи его данные и вот уже полностью готовая страница. А на клиенте она просто за счет js на события реагировать начнет.

Я считаю, это сервер. Давай посмотрим, что Олег скажет. Клиент, дак клиент ))

Вы себе очень сильно облегчили работу, сделав SSR в одном "пакете" с клиентом. Одобряю.

Если дальше вы в server будете делать API-сервер, который например будет проксировать в Яндекс или будет раздавать API форума - будет шикарно.

Я за вариант, когда SSR живет вместе в client.

Но тут есть нюанс - вам всегда придется ходить "по сети", даже в свои APIшки.

cap-Bernardito · 2023-03-30T14:28:23Z

packages/client/server.js

+import express from "express";
+import fs from "node:fs";
+import path from "node:path";
+


А почему такие импорты? Не встречал раньше. Можно же просто

import fs from "fs"; import path from "path";

Ну и, как писал выше, думаю это должно в папке server быть написано и на ts

С 18 версии node рекомендует писать так "node:..."
https://nodejs.org/docs/latest-v19.x/api/fs.html

cap-Bernardito · 2023-03-30T14:34:27Z

packages/client/server.js

+  const isProd = process.env.NODE_ENV === "production";
+  const indexProd = isProd ? fs.readFileSync(path.resolve("dist/client/index.html"), "utf-8") : "";
+  const root = process.cwd();


Есть предложение заинлайненные пути вынести в переменные в начало файла. По крайней мере какие-то общие части типа dist/client, dist/server, ну и дальше уже их использовать для получения итоговых путей.

Пока оставлю так, при переносе ничего не изменится.

cap-Bernardito · 2023-03-30T14:48:13Z

packages/client/server.js

+        .replace(`<!--emotionCss-->`, emotionCss)
+        .replace(`<!--store-data-->`, JSON.stringify(initialState).replace(/</g, "\\u003c"));
+


А почему решил использовать JSON.stringify, а не serialize, как в примере.

Или замена .replace(/</g, "\\u003c")) делает его безопасным?
Я не достаточно в теме, просто рассуждаю. Есть библиотека для сериализации, которая много чего реплейсит. Почему не она? ))

Как пишет redux, можно и такой способ оставить.
https://redux.js.org/usage/server-rendering#security-considerations

Да, такой replace вполне безопасен

cap-Bernardito · 2023-03-30T14:52:06Z

packages/client/src/theme/ThemeProvider.tsx

 const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>(defaultTheme);
+  const [theme, setTheme] = useState<Theme>(Theme.LIGHT);
+


А почему дефолтную тему решил сменить на светлую? Мне кажется темная симпатичнее ))
Ну и в любом случае, это изменение не должно наверное в текущем PR быть.

Пришлось так сделать, т.к. в node нет localStorage

Дак я по поводу рефактора не спорю, вопрос, почему не Theme.DARK? ))

const [theme, setTheme] = useState<Theme>(Theme.DARK);

Получается, ты не рефактор компонента сделал, а сменил его поведение по умолчанию.

Вернул тему Theme.DARK

AleksandrMenshchikov added 4 commits March 29, 2023 10:59

feat: add ssr

81d8bb4

feat: add ssr

0463db1

feat: add ssr

72b8ca5

feat: add ssr

c04d670

fix: fix nanoid

418844c

vercel bot deployed to Preview March 29, 2023 20:26 View deployment

fix: delete vercel.json

20435ec

vercel bot deployed to Preview March 29, 2023 21:10 View deployment

fix: fix code

8c4ddb7

vercel bot deployed to Preview March 30, 2023 06:01 View deployment

test: change "test": "npm run test:coverage" to "test": "npm run test…

186aba3

…:only"

vercel bot deployed to Preview March 30, 2023 07:14 View deployment

AleksandrMenshchikov marked this pull request as ready for review March 30, 2023 07:17

fix: fix yarn.lock

707fb36

vercel bot deployed to Preview March 30, 2023 07:26 View deployment

AleksandrMenshchikov requested review from cap-Bernardito, EAbashin, KozlovAleksandr, MakhovRoman and Olegas March 30, 2023 07:29

cap-Bernardito reviewed Mar 30, 2023

View reviewed changes

fix: fix code

9748a3c

vercel bot deployed to Preview March 30, 2023 15:48 View deployment

AleksandrMenshchikov requested a review from cap-Bernardito March 30, 2023 16:03

fix: fix code

ce6000f

vercel bot deployed to Preview March 30, 2023 17:22 View deployment

cap-Bernardito approved these changes Mar 30, 2023

View reviewed changes

fix: replace rimraf from dependencies to devDependencies

6289f3d

vercel bot deployed to Preview March 30, 2023 17:38 View deployment

KozlovAleksandr approved these changes Mar 30, 2023

View reviewed changes

fix: fix commands in package.json

836b9ac

vercel bot deployed to Preview March 30, 2023 20:23 View deployment

Merge branch 'dev' into dev-ssr

7a0c3af

vercel bot deployed to Preview March 30, 2023 20:28 View deployment

AleksandrMenshchikov merged commit 95f9f74 into dev Mar 31, 2023

AleksandrMenshchikov deleted the dev-ssr branch March 31, 2023 04:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dev-ssr #41

dev-ssr #41

AleksandrMenshchikov commented Mar 29, 2023

vercel bot commented Mar 29, 2023 •

edited

Loading

cap-Bernardito left a comment

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

cap-Bernardito Mar 30, 2023

Olegas Mar 30, 2023 •

edited

Loading

Olegas Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

Olegas Mar 30, 2023

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading

cap-Bernardito Mar 30, 2023

AleksandrMenshchikov Mar 30, 2023

		"build:client": "rm -rf dist/client && vite build --outDir dist/client",
		"build:server": "rm -rf dist/server && vite build --outDir dist/server --ssr src/entry-server.tsx",

		.replace(`<!--emotionCss-->`, emotionCss)
		.replace(`<!--store-data-->`, JSON.stringify(initialState).replace(/</g, "\\u003c"));

dev-ssr #41

dev-ssr #41

Conversation

AleksandrMenshchikov commented Mar 29, 2023

Добавление SSR

vercel bot commented Mar 29, 2023 • edited Loading

cap-Bernardito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AleksandrMenshchikov Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AleksandrMenshchikov Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Olegas Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AleksandrMenshchikov Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Mar 29, 2023 •

edited

Loading

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading

Olegas Mar 30, 2023 •

edited

Loading

AleksandrMenshchikov Mar 30, 2023 •

edited

Loading