ДокументацияРежимы страниц файла

CSR (рендеринг на стороне клиента)

Определение

CSR передает навигацию браузеру: после первого документа при перемещении между страницами больше не запрашивается HTML у сервера. В Nexy это проектное решение, а не решение первой страницы - useCSR = True превращает все приложение в маршрутизируемое клиентом.

Как это работает

nexyconfig.py

from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()    useCSR = True

Затем проект меняет форму:

	Режим сервера (`False`)	Режим клиента (`True`)
Маршруты	`.nexy`, `.md`, `.mdx`	`.tsx`, `.jsx`, `.vue`, `.svelte`
Документ	`layout.nexy`	корень `layout.tsx` / `.vue` / `.svelte` владеет `<html>`, `<head>`, `<body>`
Клиентские компоненты	острова внутри страницы	сами страницы
`.nexy` под `src/routes/`	формат страницы	отклонен до `nx dev`, `nx start` и `nx build`
Навигация	полный запрос по ссылке	клиентский маршрутизатор

.md и .mdx остаются в силе: Nexy отображает их на сервере внутри клиентского макета, а клиентский маршрутизатор берет на себя управление оттуда. Обработчики .py располагаются рядом с маршрутами и обслуживаются FastAPI.

Жизненный цикл рендеринга

Запрос достигает файлового маршрутизатора, который находит соответствующий маршрут и его макеты.
Корневой макет отображает весь документ в Node - первый ответ уже содержит настоящий <html>, а не пустую оболочку.
Nexy внедряет клиентские ресурсы и описание страницы в формате JSON перед </body>.
Браузер увлажняет этот документ. С этого момента вложенные макеты сохраняют свое состояние.
Ссылка на другой маршрут обрабатывается клиентским маршрутизатором: запрос документа отсутствует, страница отображается в браузере.

В процессе разработки документ отображается по требованию сервером разработки Vite. В рабочей среде он отображается один раз при сборке: статический маршрут получает свой документ, динамический маршрут получает один для каждого объявленного статического параметра, или оболочка (макеты вокруг пустой страницы) когда она не объявляет ни одного.

Когда использовать

Панели мониторинга, редакторы - все, что ведет себя как приложение.
Python API с клиентским приложением сверху.
Страница, на которой каждое взаимодействие локально и ощущается путешествие туда и обратно.

Конфигурация

Настройка	Значение
`useFF`	требуется: `useCSR` без клиентской платформы отклонено
`useCSR`	`True`
`useRouter`	должно оставаться выключенным: модульный маршрутизатор отклонен в клиентском режиме

Эти проверки игнорируют файлы и папки, начинающиеся с _ или ..

Пример

src/маршруты/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <head><title>My app</title></head>      <body>{children}</body>    </html>  )}

src/маршруты/index.tsx

export default function Home() {  return <h1>Home</h1>}

Ограничения

Весь проект. Вы не можете объединить одну страницу CSR с серверным проектом: выберите режим для приложения, затем используйте острова для интерактивных частей серверной страницы.
Никаких .nexy маршрутов. Все, что вы написали в .nexy, должно стать компонентом фреймворка.
Данные сервера проходят через конечные точки. Клиентский маршрут не может прочитать базу данных во время рендеринга; он вызывает обработчик .py или Действие.
Динамическому маршруту необходим объявленный статический параметр, или он начинается из оболочки. Экспортируйте getStaticParams() со страницы - также принимаются имена Next.js getStaticPaths и generateStaticParams - чтобы иметь один документ на каждое значение. Без него оболочка переносит макеты, а не страницу: страница появляется после запуска браузера.
CSR - это не пустая страница и не SPA. Первый документ отображается сервером; это навигация, которая происходит в браузере.

Следующие шаги

Режим сервера и режим клиента: проверки и отклоненные файлы
Макеты: какому файлу принадлежит документ
SSR: значение по умолчанию, страница за страницей.
Фронтенд: сервер разработки и сборка клиента

Изменить на GitHub