astro的ssr模式体验

简介

2022年，在国外前端圈，astro非常火爆。本篇文章写一下astro，这个我用下来，嗯，确实不错的framework。一方面可以做SSR，另外也可以做SSG。并且它有个island思想。用下来非常适合自己，比如我可以把它构建成node的 middleware，集成到自己现有的系统去，也可以搞成单独的node应用，另外我也可以用github ci这种弄ssg，部署到vercel这样的托管平台，给个域名就能访问。

这篇文章主要讲解ssr和ssg两种用法。首先会构建数据源，然后再会用astro 搞一个展示端。

官网地址:

astro官网https://astro.build/

数据端

数据源从最简单的方式讲解，方便理解：

假如我们有一个koa应用A，会返回数据：(负责内容数据的管理)

1
2
3

{
  name: '123'
}

代码很简单：

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:

# 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配置文件：

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目录: