astro的ssr模式体验
简介
2022年,在国外前端圈,astro非常火爆。本篇文章写一下astro,这个我用下来,嗯,确实不错的framework。一方面可以做SSR,另外也可以做SSG。并且它有个island思想。用下来非常适合自己,比如我可以把它构建成node的 middleware,集成到自己现有的系统去,也可以搞成单独的node应用,另外我也可以用github ci这种弄ssg,部署到vercel这样的托管平台,给个域名就能访问。
这篇文章主要讲解ssr和ssg两种用法。首先会构建数据源,然后再会用astro 搞一个展示端。
官网地址:
数据端
数据源从最简单的方式讲解,方便理解:
假如我们有一个koa
应用A,会返回数据:(负责内容数据的管理)
代码很简单:
1 2 3 4 5 6 7 8 9 10 11
| const Koa = require('koa') const app = new Koa();
app.use((ctx,next)=>{ console.log("====>in") ctx.body = { name: '123' } })
app.listen(3001)
|
展示端
然后我们再有一个node程序,用astro创建,负责展示部分。
我们用脚手架创建一个astro:
1 2 3 4 5 6 7 8
| # npm npm create astro@latest
# yarn yarn create astro
# pnpm pnpm create astro@latest
|
根据提示创建完成后,我们先运行开发模式:
然后运行起来效果如下:
然后我们打开 /src/pages/index.astro
文件,然后在头上–之间加入fetch操作,相当于获取数据:
1 2 3
| const resp = await fetch('http://127.0.0.1:3001'); const info = await resp.json(); console.log(info)
|
然后我们访问后,我们看到命令行里面打印了:
然后我们修改index.astro
的模版,第十七行加入显示这个数据:
访问后,我们可以看到这个123显示出来了:
然后正常,我们npm run build
,它相当于在构建阶段把数据调用,并生成了静态的html文件:
然后我们平常这种数据由于都需要从后端那边调用,例如我们的文章数据,我们需要发布一个新文章,不希望部署我们的应用。
那我们希望数据是服务端进行调用并渲染的:
我们需要安装:
然后我们修改根目录的astro.config.mjs
配置文件:
1 2 3 4 5 6 7 8 9 10 11
| import { defineConfig } from 'astro/config';
import node from '@astrojs/node'
// https://astro.build/config export default defineConfig({ output: 'server', adapter: node({ mode: 'standalone' }) });
|
上面有个mode模式,middleware或者standalone,我们可以集成到现有的node应用或者以独立应用部署。
然后我们再执行npm run build
,可以看到dist目录:
然后我们可以通过node ./dist/server/entry.mjs
运行:
然后访问后:
然后我们看到koa的那个应用程序,每次访问都有日志打印,然后看到chrome开发者工具输出也是html内容,是ssr无疑。
扩展
由于我们为了内容讲解,开头数据内容用了一个简易版本的koa接口做数据源,然后实际我们可以用headless cms,
这种cms,可以创建类型和数据,然后给astro来调用,简单方便。当然实际,我们可以通过用astro来做bff层,调用java等展示端。