Astro 中启用服务器端渲染

Astro 中通过 Node.js 启用服务器端渲染

在 Astro 中启用服务端渲染(SSR, Server Side Rendering)非常简单,而且启用后可以使用新的特性:

  • 在应用程序中实现登录状态会话。
  • fetch 动态调用 API 来渲染数据。
  • 通过适配器部署你的网站。

适配器

为了启用 SSR,你需要使用适配器(Adapter)。这是因为 SSR 需要服务器运行时环境运行服务端代码。服务端代码可以调用该运行时提供的 API。

安装一个适配器可以让 Astro 访问相应的 API,并允许 Astro 输出一个脚本(server脚本),在服务器上运行我们项目。

现有以下适配器,未来将会有更多适配器支持:

我们主要介绍Node.js 适配器

安装Node.js适配器

使用以下 astro add 命令添加适配器,以在 Astro 项目中启用 SSR。这将安装适配器并一步对项目的 astro.config.mjs 文件进行适当的更改。

# Using NPM
npx astro add node
# Using Yarn
yarn astro add node
# Using PNPM
pnpm astro add node

手动安装:

  1. 在终端中安装Node.js适配器

    npm install @astrojs/node
  2. astro.config.mjs 项目配置文件中添加两行

    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    
    export default defineConfig({
      output: 'server',
      adapter: node({
        mode: 'standalone'
      }),
    });

配置项参数

@astrojs/node 可以通过将选项参数传递给适配器函数来配置:

Mode 模式设置

控制适配器是构建为中间件middleware模式还是独立standalone模式。

  • 中间件模式允许将构建的输出用作另一个 Node.js 服务器的中间件,例如 Express.js 或 Fastify。

    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    
    export default defineConfig({
      output: 'server',
      adapter: node({
        mode: 'middleware'
      }),
    });
  • 独立模式构建的服务器脚本,随着入口模块的运行自动启动。这使得我们可以更轻松地将构建部署到主机,而无需任何其他代码。

启动

根据两种不同的模式,有着不同的启动和使用方法

中间件模式

服务器入口点默认构建为 ./dist/server/entry.mjs。该模块导出一个处理函数,可以与任何支持 Node 请求和响应对象的框架一起使用,比如Express:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
app.use(express.static('dist/client/')) // 静态资源文件
app.use(ssrHandler);

app.listen(8080);

注意: 中间件模式不提供文件服务,需要配置 HTTP 框架,如上代码所示。默认情况下,客户端输出在 ./dist/client/

独立模式

独立模式启动很简单,只要执行构建的入口文件./dist/server/entry.mjs

node ./dist/server/entry.mjs

对于独立模式,服务端除了处理页面和 API 路由之外还具有文件服务。

自定义主机和端口
HOST=0.0.0.0 PORT=3000 node ./dist/server/entry.mjs

参考:

astro/packages/integrations/node at main · withastro/astro

服务端渲染 Astro 文档

你可能感兴趣的:(Astro 中启用服务器端渲染)