[Base] 更新 SSR 机制, 支持流式渲染注入 head 标签

损失的 TTFB 可以忽略不计

src/composables/apiRequest.js

@@ -20,9 +20,7 @@ function replaceUrl(url) {
 }
 
 export function useApiRequest(method, url, data, config = {}) {
-  const start = Date.now()
   const baseURL = getEndpoint()
-  // 若为 GET 请求，将 data 转为查询参数拼接到 URL 上
   const fullURL = method === 'GET' && data
     ? `${baseURL}${url}?${objectToQueryString(data)}`
     : `${baseURL}${url}`
@@ -45,14 +43,14 @@ export function useApiRequest(method, url, data, config = {}) {
     }
   )
   const exec = async () => {
-    await execute()
+    const start = Date.now()
+    try { await execute() }
+    catch (e) {}
     const stop = Date.now()
     return {
       status: response.value?.status || (error.value?.response?.status ?? -1),
       data: response.value?.data || error.value?.response?.data || null,
       duration: stop - start,
-      start,
-      stop,
       error: error.value,
       isSSR: import.meta.env.SSR,
     }

src/entry-server.js

@@ -1,7 +1,7 @@
 import { renderToWebStream } from 'vue/server-renderer'
 import { createApp } from './main'
 
-import { createSSRRouter } from './router.js'
+import { createSSRRouter, defaultHead } from './router.js'
 
 export async function getRoute(_url) {
 	const router = createSSRRouter()
@@ -9,15 +9,24 @@ export async function getRoute(_url) {
 	await router.isReady()
 	const route = router.currentRoute.value.matched[0]
 	const code = route.meta.code || 200
-	return { router, code }
+	return { router, code, meta: route.meta.meta || false,
+		title: route.meta.title || route.meta.name || defaultHead.title,
+		metas: [...defaultHead.meta, ...route.meta.metas || []]
+	}
 }
 
 export async function render(router, cookies, host) {
 	const { app, pinia } = createApp()
 	app.use(router)
-	const ctx = { cookies, host }
+	const headState = {
+		ready: false,
+		code: null,
+		title: null,
+		meta: []
+	}
+	const ctx = { cookies, host, headState }
 	const stream = renderToWebStream(app, ctx)
 	const piniaState = pinia.state.value
-	return { stream, piniaState }
+	return { stream, piniaState, headState }
 }
 

src/router.js

@@ -1,5 +1,25 @@
 import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
 
+export const defaultHead = {
+	title: 'AO3 Mirror',
+	meta: [
+		{ name: 'description',
+		content: 'ArchiveOfOurOwn 镜像站, 使用 Vue 3 与 MDUI 2 重写界面, 优化 UI/UX' },
+		{ name: 'author',
+		content: 'UnknownMp' },
+		{ property: 'og:title',
+		content: 'AO3 Mirror' },
+		{ property: 'og:description',
+		content: 'ArchiveOfOurOwn 重构镜像' },
+		{ property: 'og:image',
+		content: 'https://cdn.unknownmp.top/website/ao3mirror.svg' },
+		{ property: 'og:url',
+		content: 'https://ao3.unknownmp.top' },
+		{ property: 'og:type',
+		content: 'website' },
+	]
+}
+
 export const createSSRRouter = () => createRouter({
 	history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
 	scrollBehavior(to, from, savedPosition) {
@@ -25,7 +45,8 @@ export const createSSRRouter = () => createRouter({
 		component: () => import('./views/Work.vue'),
 		meta: {
 			title: '阅读',
-			hidden: true
+			hidden: true,
+			meta: true
 		}
 	},{
 		path: '/work/:id/:cid',
@@ -33,7 +54,8 @@ export const createSSRRouter = () => createRouter({
 		component: () => import('./views/Work.vue'),
 		meta: {
 			title: '阅读',
-			hidden: true
+			hidden: true,
+			meta: true
 		}
 	},{
 		path: '/search/simple',
@@ -48,7 +70,6 @@ export const createSSRRouter = () => createRouter({
 		name: '设置',
 		component: () => import('./views/Settings.vue'),
 		meta: {
-			title: '设置',
 			order: 90
 		},
 	},{
@@ -56,7 +77,6 @@ export const createSSRRouter = () => createRouter({
 		name: '关于',
 		component: () => import('./views/About.md'),
 		meta: {
-			title: '',
 			order: 100
 		},
 	},{
@@ -64,7 +84,6 @@ export const createSSRRouter = () => createRouter({
 		name: '开发人员选项',
 		component: () => import('./views/Developer.vue'),
 		meta: {
-			title: '',
 			hidden: true
 		},
 	},{

src/ssr/headHelper.js

@@ -0,0 +1,47 @@
+import { useSSRContext } from 'vue'
+
+export function useHeadHelper() {
+	if (!import.meta.env.SSR) {
+		return {
+			headReady: () => {},
+			setMeta: () => {},
+			addMeta: () => {},
+			setTitle: () => {},
+			setCode: () => {},
+		}
+	}
+
+	const ssrContext = useSSRContext()
+
+	if (!ssrContext || !ssrContext.headState) {
+		return {
+			headReady: () => {},
+			setMeta: () => {},
+			addMeta: () => {},
+			setTitle: () => {},
+			setCode: () => {},
+		}
+	}
+
+	return {
+		headReady: () => {
+			ssrContext.headState.ready = true
+		},
+		setMeta: (metas = []) => {
+			ssrContext.headState.meta = [
+				...ssrContext.headState.meta,
+				...metas
+			]
+		},
+		addMeta: (meta) => {
+			ssrContext.headState.meta.push(meta)
+		},
+		setTitle: (title) => {
+			ssrContext.headState.title = title
+		},
+		setCode: (code) => {
+			ssrContext.headState.code = code
+		}
+	}
+}
+

src/stores/route.js

@@ -2,6 +2,8 @@ import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useRouter, useRoute } from 'vue-router'
 
+import { useHeadHelper } from '../ssr/headHelper.js'
+
 export const useRouteStore = defineStore('route', () => {
 	const router = useRouter()
 	const route = useRoute()
@@ -16,7 +18,9 @@ export const useRouteStore = defineStore('route', () => {
 	)
 	const lastFromDrawer = ref(0)
  	const customTitle = ref(null)
-	const title = computed(() => customTitle.value || route.meta.title || route.name)
+	const title = import.meta.env.SSR ?
+		computed(() => route.meta.title || route.name) :
+		computed(() => customTitle.value || route.meta.title || route.name)
 	function drawerPress(target) {
 		if (lastFromDrawer.value == 0) {
 			lastFromDrawer.value = 1

src/stores/workRead.js

@@ -62,9 +62,10 @@ export const useWorkReadState = defineStore('workRead', () => {
 		if (result.status == 200) {
 			setData(result.data)
 			state.value = 'ready'
-		} else {
-			id.value = target
+		} else if (result.status == 404) {
 			state.value = import.meta.env.SSR ? 'ssrnotfound' : 'notfound'
+		} else if (result.status == 401) {
+			state.value = 'unauth'
 		}
 	}
 	return {

src/views/Work.vue

@@ -4,6 +4,8 @@ import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 const route = useRoute()
 
+import { useHeadHelper } from '../ssr/headHelper.js'
+
 import { useWorkReadState } from '@/stores/workRead.js'
 import { useRouteStore } from '@/stores/route.js'
 
@@ -43,11 +45,23 @@ const categoryName = {
 	fm: '女/男'
 }
 
-onServerPrefetch(async () => await workReadState.loadWork(route.params.id, route.params.cid))
+onServerPrefetch(async () => {
+	const headHelper = useHeadHelper()
+	await workReadState.loadWork(route.params.id, route.params.cid)
+	if (workReadState.state == 'ready') headHelper.setTitle(workReadState.title)
+	else if (workReadState.state == 'ssrnotfound') {
+		headHelper.setTitle('文章未找到')
+		headHelper.setCode(404)
+	} else if (workReadState.state == 'unauth') {
+		headHelper.setTitle('访问被阻止')
+		headHelper.setCode(401)
+	}
+	headHelper.headReady()
+})
 
 onMounted(async () => {
 	watch(() => workReadState.state, (value) => { if (value == 'ready') routeState.customTitle = workReadState.title })
-	if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id, route.params.cid)
+	if (workReadState.state != 'ssrnotfound' && workReadState.state != 'ready') await workReadState.loadWork(route.params.id, route.params.cid)
 	if (workReadState.state == 'ready') {
 		routeState.customTitle = workReadState.title
 		if (workReadState.cid !== null && parseInt(route.params.cid) != workReadState.cid) {
@@ -94,28 +108,34 @@ async function switchWorkWithIndex(target) {
 </script>
 
 <template>
-	<ClientOnly>
+	<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
+		<h2>文章不存在...</h2>
+		是不是链接没有复制完全?<br/>
+		ID: {{ workReadState.id }}<br/>
+		<template v-if="workReadState.cid">
+			CID: {{ workReadState.cid }}
+		</template>
+		<a @click="$router.back()">返回</a>
+	</template><template v-if="workReadState.state == 'unauth'">
+		<h2>访问被阻止!</h2>
+		上游 AO3 不允许匿名用户访问该作品<br/>
+		ID: {{workReadState.id}}<br/>
+		<template v-if="workReadState.cid">
+			CID: {{ workReadState.cid }}
+		</template>
+		<a @click="$router.back()">返回</a>
+	</template><template v-if="workReadState.state == 'errformat'">
+		<h2>路径格式错误</h2>
+		ID: {{ $route.params.id }}<br/>
+		<template v-if="$route.params.id">
+			CID: {{ $route.params.id }}
+		</template><br/>
+		 <a @click="$router.back()">返回</a>
+	</template><ClientOnly>
 		<template v-if="workReadState.state == 'loading'">
 			加载中...<br/>
 			<mdui-linear-progress></mdui-linear-progress>
 		</template>
-		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
-			<h2>文章不存在...</h2>
-			是不是链接没有复制完全?<br/>
-			ID: {{ workReadState.id }}<br/>
-			<template v-if="workReadState.cid">
-				CID: {{ workReadState.cid }}
-			</template>
-			<a @click="$router.back()">返回</a>
-		</template>
-		<template v-if="workReadState.state == 'errformat'">
-			 <h2>路径格式错误</h2>
-			ID: {{ $route.params.id }}<br/>
-			<template v-if="$route.params.id">
-				CID: {{ $route.params.id }}
-			</template><br/>
-			 <a @click="$router.back()">返回</a>
-		</template>
 		<template v-if="workReadState.state == 'ready'">
 			<article>
 				<h1 style="margin: auto">{{ workReadState.title }}</h1>
@@ -198,15 +218,6 @@ async function switchWorkWithIndex(target) {
 			</mdui-dialog>
 		</template>
 	<template #ssr>
-		<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
-			<h2>文章不存在...</h2>
-			是不是链接没有复制完全?<br/>
-			ID: {{workReadState.id}}<br/>
-			<template v-if="workReadState.cid">
-				CID: {{ workReadState.cid }}
-			</template>
-			<a @click="$router.back()">返回</a>
-		</template>
 		<template v-if="workReadState.state == 'ready'">
 			<h2>{{ workReadState.title }}</h2>
 			<h4>{{ workReadState.pesud }}</h4>