From c427e10f173d348d181b568ced9c35edd83ee03f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 21 Nov 2024 07:58:34 +0900
Subject: [PATCH] perf(frontend): reduce api requests for non-logged-in
 enviroment (#15001)

* wip

* Update CHANGELOG.md

* wip

Signed-off-by: eternal-flame-AD <yume@yumechi.jp>
---
 CHANGELOG.md                                  |  1 +
 .../src/server/web/ClientServerService.ts     | 14 ++++++++++-
 .../backend/src/server/web/views/base.pug     |  3 +++
 packages/frontend/src/pages/clip.vue          | 14 ++++++++---
 packages/frontend/src/pages/note.vue          | 11 ++++++++-
 packages/frontend/src/pages/user/index.vue    | 18 +++++++++++++--
 packages/frontend/src/server-context.ts       | 23 +++++++++++++++++++
 7 files changed, 77 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend/src/server-context.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e41073015..7cd084495b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,7 @@ PgroongaのCWサーチ (github.com/paricafe/misskey#d30db97b59d264450901c1dd8680
   (Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
 - Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
 - Enhance: リノートメニューに「リノートの詳細」を追加
+- Enhance: 非ログイン状態でMisskeyを開いた際のパフォーマンスを向上
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index a50e37b49a..8dcd76ee71 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -611,7 +611,7 @@ export class ClientServerService {
 			}
 		});
 
-		//#region SSR (for crawlers)
+		//#region SSR
 		// User
 		fastify.get<{ Params: { user: string; sub?: string; } }>('/@:user/:sub?', async (request, reply) => {
 			const { username, host } = Acct.parse(request.params.user);
@@ -636,11 +636,17 @@ export class ClientServerService {
 					reply.header('X-Robots-Tag', 'noimageai');
 					reply.header('X-Robots-Tag', 'noai');
 				}
+
+				const _user = await this.userEntityService.pack(user);
+
 				return await reply.view('user', {
 					user, profile, me,
 					avatarUrl: user.avatarUrl ?? this.userEntityService.getIdenticonUrl(user),
 					sub: request.params.sub,
 					...await this.generateCommonPugData(this.meta),
+					clientCtx: htmlSafeJsonStringify({
+						user: _user,
+					}),
 				});
 			} else {
 				// リモートユーザーなので
@@ -693,6 +699,9 @@ export class ClientServerService {
 					// TODO: Let locale changeable by instance setting
 					summary: getNoteSummary(_note),
 					...await this.generateCommonPugData(this.meta),
+					clientCtx: htmlSafeJsonStringify({
+						note: _note,
+					}),
 				});
 			} else {
 				return await renderBase(reply);
@@ -781,6 +790,9 @@ export class ClientServerService {
 					profile,
 					avatarUrl: _clip.user.avatarUrl,
 					...await this.generateCommonPugData(this.meta),
+					clientCtx: htmlSafeJsonStringify({
+						clip: _clip,
+					}),
 				});
 			} else {
 				return await renderBase(reply);
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 03eab87233..88aabda04f 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -72,6 +72,9 @@ html
 
 		script(type='application/json' id='misskey_meta' data-generated-at=now)
 			!= metaJson
+		
+		script(type='application/json' id='misskey_clientCtx' data-generated-at=now)
+			!= clientCtx
 
 		script(integrity=bootJS.integrity) !{bootJS.content}
 
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index 7b1737fece..891d59d605 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -33,25 +33,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, provide, ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import { url } from '@@/js/config.js';
+import type { MenuItem } from '@/types/menu.js';
 import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { url } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import { clipsCache } from '@/cache.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
 import { genEmbedCode } from '@/scripts/get-embed-code.js';
-import type { MenuItem } from '@/types/menu.js';
+import { getServerContext } from '@/server-context.js';
+
+const CTX_CLIP = getServerContext('clip');
 
 const props = defineProps<{
 	clipId: string,
 }>();
 
-const clip = ref<Misskey.entities.Clip | null>(null);
+const clip = ref<Misskey.entities.Clip | null>(CTX_CLIP);
 const favorited = ref(false);
 const pagination = {
 	endpoint: 'clips/notes' as const,
@@ -64,6 +67,11 @@ const pagination = {
 const isOwned = computed<boolean | null>(() => $i && clip.value && ($i.id === clip.value.userId));
 
 watch(() => props.clipId, async () => {
+	if (CTX_CLIP && CTX_CLIP.id === props.clipId) {
+		clip.value = CTX_CLIP;
+		return;
+	}
+
 	clip.value = await misskeyApi('clips/show', {
 		clipId: props.clipId,
 	});
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 454ee3c6bc..3e1d04bd6d 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -62,13 +62,16 @@ import { dateString } from '@/filters/date.js';
 import MkClipPreview from '@/components/MkClipPreview.vue';
 import { defaultStore } from '@/store.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
+import { getServerContext } from '@/server-context.js';
+
+const CTX_NOTE = getServerContext('note');
 
 const props = defineProps<{
 	noteId: string;
 	initialTab?: string;
 }>();
 
-const note = ref<null | Misskey.entities.Note>();
+const note = ref<null | Misskey.entities.Note>(CTX_NOTE);
 const clips = ref<Misskey.entities.Clip[]>();
 const showPrev = ref<'user' | 'channel' | false>(false);
 const showNext = ref<'user' | 'channel' | false>(false);
@@ -116,6 +119,12 @@ function fetchNote() {
 	showPrev.value = false;
 	showNext.value = false;
 	note.value = null;
+
+	if (CTX_NOTE && CTX_NOTE.id === props.noteId) {
+		note.value = CTX_NOTE;
+		return;
+	}
+
 	misskeyApi('notes/show', {
 		noteId: props.noteId,
 	}).then(res => {
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index a6244e2a93..d862387401 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -39,6 +39,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
+import { getServerContext } from '@/server-context.js';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
@@ -52,6 +53,8 @@ const XFlashs = defineAsyncComponent(() => import('./flashs.vue'));
 const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
 const XRaw = defineAsyncComponent(() => import('./raw.vue'));
 
+const CTX_USER = getServerContext('user');
+
 const props = withDefaults(defineProps<{
 	acct: string;
 	page?: string;
@@ -61,13 +64,24 @@ const props = withDefaults(defineProps<{
 
 const tab = ref(props.page);
 
-const user = ref<null | Misskey.entities.UserDetailed>(null);
+const user = ref<null | Misskey.entities.UserDetailed>(CTX_USER);
 const error = ref<any>(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
+
+	const { username, host } = Misskey.acct.parse(props.acct);
+
+	if (CTX_USER && CTX_USER.username === username && CTX_USER.host === host) {
+		user.value = CTX_USER;
+		return;
+	}
+
 	user.value = null;
-	misskeyApi('users/show', Misskey.acct.parse(props.acct)).then(u => {
+	misskeyApi('users/show', {
+		username,
+		host,
+	}).then(u => {
 		user.value = u;
 	}).catch(err => {
 		error.value = err;
diff --git a/packages/frontend/src/server-context.ts b/packages/frontend/src/server-context.ts
new file mode 100644
index 0000000000..aa44a10290
--- /dev/null
+++ b/packages/frontend/src/server-context.ts
@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import * as Misskey from 'misskey-js';
+import { $i } from '@/account.js';
+
+const providedContextEl = document.getElementById('misskey_clientCtx');
+
+export type ServerContext = {
+	clip?: Misskey.entities.Clip;
+	note?: Misskey.entities.Note;
+	user?: Misskey.entities.UserLite;
+} | null;
+
+export const serverContext: ServerContext = (providedContextEl && providedContextEl.textContent) ? JSON.parse(providedContextEl.textContent) : null;
+
+export function getServerContext<K extends keyof NonNullable<ServerContext>>(entity: K): Required<Pick<NonNullable<ServerContext>, K>> | null {
+	// contextは非ログイン状態の情報しかないためログイン時は利用できない
+	if ($i) return null;
+
+	return serverContext ? (serverContext[entity] ?? null) : null;
+}