🪴qql1's digital garden

渲染方法

1分钟阅读

  • 渲染方法返回最终的html（服务端）或vue实例（客户端）
    • 通常是将页面使用渲染函数进行渲染，然后在附上一些其他内容（如导航栏等）

定义默认的渲染方式

我们不必为每个页面创建 .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 框架（如 React）覆盖 render() hook

示例

child::

实例

// /renderer/_default.page.server.js
// Environment: Node.js
import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
export { render };
async function render(pageContext) {
  const { Page, pageProps } = pageContext;
  const app = createSSRApp({
    render: () => h(Page, pageProps),//渲染传入的页面
  });
  const appHtml = await renderToString(app);
  const title = "Vite SSR";
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
      </head>
      <body>
        <div id="app">${dangerouslySkipEscape(appHtml)}</div>
      </body>
    </html>`;
}
// /renderer/_default.page.client.js
// Environment: Browser
import { createSSRApp, h } from "vue";
export { render };
async function render(pageContext) {
  const { Page, pageProps } = pageContext;
  const app = createSSRApp({
    render: () => h(Page, pageProps),
  });
  app.mount("#app");
}

Nuxt 将这一点抽象出来，让我们可以更快上手，但也意味着我们失去了对应用程序架构核心部分的控制， 我们最终会在 Nuxt 限制性的黑盒上失去更多时间 这种级别的控制使我们 轻松自然 地集成我们想要的任何工具（Vuex, GraphQL, Service Worker, …）

指向原始笔记的链接

关系图谱

反向链接