React 教程

路由

跟 Next.js 类似我们通过创建一个 .page.jsx 文件来定义一个新页面

// /pages/index.page.jsx
// Environment: Browser, Node.js

import React, { useState } from "react";
import { Counter } from "../components/Counter";

export { Page };

function Page() {
  return <>
    This page is rendered to HTML and interactive: <Counter />
  </>;
}

默认情况下，vite-plugin-ssr 执行文件系统路由

FILESYSTEM                  URL
/pages/index.page.jsx        /
/pages/about.page.jsx        /about

我们也可以使用 路由字符串（参数化路由，如/movies/@id）或 路由函数（灵活编程）来定义页面路由

// /pages/index.page.route.js
// Environment: Node.js (and Browser if we choose Client Routing)

// 请注意这两个文件是如何共享相同的base `/pages/index.page.`；
// `vite-plugin-ssr` 知道 `/pages/index.page.route.js` 定义了 `/pages/index.page.jsx` 的路由


// 路由函数
export default pageContext => pageContext.urlPathname === '/';

// 如果我们不创建 `.page.route.js` 文件，那么 `vite-plugin-ssr` 会执行文件系统路由

控制渲染

跟 Next.js 不同的是，我们可以控制如何页面渲染

// /renderer/_default.page.server.jsx
// Environment: Node.js

import ReactDOMServer from "react-dom/server";
import React from "react";
import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";

export { render };

async function render(pageContext) {
  const { Page, pageProps } = pageContext;
  const viewHtml = ReactDOMServer.renderToString(
    <Page {...pageProps} />
  );

  const title = "Vite SSR";

  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
      </head>
      <body>
        <div id="page-view">${dangerouslySkipEscape(viewHtml)}</div>
      </body>
    </html>`;
}

// /renderer/_default.page.client.jsx
// Environment: Browser

import ReactDOM from "react-dom";
import React from "react";

export { render };

async function render(pageContext) {
  const { Page, pageProps } = pageContext
  ReactDOM.hydrate(
    <Page {...pageProps} />,
    document.getElementById("page-view")
  );
}

这种级别的控制使我们 轻松自然 地集成我们想要的任何工具（Redux, GraphQL, Service Worker, Preact, ...）

页面文件后缀有四种：

.page.js: 在浏览器和 Node.js 中运行
.page.client.js: 只在浏览器中运行
.page.server.js: 只在 Node.js 中运行
.page.route.js: 定义页面的路由字符串或路由函数

我们不必为每个页面创建 .page.client.js 和 .page.server.js 我们可以创建一个默认应用到所有页面的 /renderer/_default.page.client.js 和 /renderer/_default.page.server.js

实际上我们最后创建的两个文件是 /renderer/_default.page.client.js 和 /renderer/_default.page.server.js 这意味着我们可以通过定义一个新的 .page.vue 文件来创建一个新的页面（.page.route.js文件是可选的）

_default.page. 文件可以被覆盖。比如，我们可以在一些页面中使用不同的 UI 框架（如 Vue）覆盖 render() hook

数据获取

现在我们来看看如何获取数据

// /pages/star-wars/movie.page.jsx
// Environment: Browser, Node.js

import React from "react";

export { Page };

function Page(pageProps) {
  const { movie } = pageProps;
  return <>
    <h1>{movie.title}</h1>
    <p>Release Date: {movie.release_date}</p>
    <p>Director: {movie.director}</p>
  </>;
}

// /pages/star-wars/movie.page.route.js
// Environment: Node.js

// 路由字符串
export default "/star-wars/@movieId";

// /pages/star-wars/movie.page.server.js
// Environment: Node.js

import fetch from "node-fetch";

export async function onBeforeRender(pageContext) {
  // `/star-wars/@movieId` 的路由参数在 `pageContext.routeParams` 中
  const { movieId } = pageContext.routeParams;

  // `.page.server.js` 文件总是运行在 Node.js 环境中；在这里我们可以使用 SQL/ORM 查询
  const response = await fetch(`https://swapi.dev/api/films/${movieId}`);
  let movie = await response.json();

  // 我们之前定义的 render 和 hydrate 函数将 `pageContext.pageProps` 传递给Vue根组件 `Page`
  // 这就是我们定义 `pageProps` 的地方
  const pageProps = { movie };

  // 我们将 `pageProps` 作为 `pageContext.pageProps` 提供出去
  return {
    pageContext: {
      pageProps
    }
  };
}

// 默认情况下，`pageContext.*` 只能在服务器环境上使用，但我们之前定义的 hydrate 函数
// 在浏览器中运行并且需要 `pageContext.pageProps`；
// 我们使用 `passToClient` 序列化 `pageContext.pageProps`
// 并让它在浏览器中可用
export const passToClient = ["pageProps"];

这就是教程的内容，实际上我们已经知道了大部分接口 vite-plugin-ssr 不仅灵活，而且使用简单！

$ npm init vite-plugin-ssr

运行 $ npm init vite-plugin-ssr 初始化 Vite/vite-plugin-ssr 应用，或添加vite-plugin-ssr 到已有应用程序中。
说明文档

✍ Edit this page