在 Astro 中启用服务端渲染(SSR, Server Side Rendering)非常简单,而且启用后可以使用新的特性:
fetch
动态调用 API 来渲染数据。为了启用 SSR,你需要使用适配器(Adapter)。这是因为 SSR 需要服务器运行时环境运行服务端代码。服务端代码可以调用该运行时提供的 API。
安装一个适配器可以让 Astro 访问相应的 API,并允许 Astro 输出一个脚本(server脚本),在服务器上运行我们项目。
现有以下适配器,未来将会有更多适配器支持:
我们主要介绍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
手动安装:
npm install @astrojs/node
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
可以通过将选项参数传递给适配器函数来配置:
控制适配器是构建为中间件middleware
模式还是独立standalone
模式。
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
参考:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。