perf(timeline): Optimizing for CDN Caching (MisskeyIO#834)

Co-authored-by: あわわわとーにゅ <17376330+u1-liquid@users.noreply.github.com>

packages/frontend/src/components/MkTimeline.vue

@@ -18,15 +18,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, onUnmounted, provide, shallowRef } from 'vue';
+import { time as gtagTime } from 'vue-gtag';
 import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { useStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
-import { $i } from '@/account.js';
+import { $i, iAmModerator } from '@/account.js';
 import { instance } from '@/instance.js';
 import { defaultStore } from '@/store.js';
 import { Paging } from '@/components/MkPagination.vue';
+import { generateClientTransactionId } from '@/scripts/misskey-api.js';
 
 const props = withDefaults(defineProps<{
 	src: 'home' | 'local' | 'media' | 'social' | 'global' | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
@@ -68,9 +70,36 @@ const tlComponent = shallowRef<InstanceType<typeof MkNotes>>();
 
 let tlNotesCount = 0;
 
-function prepend(note) {
+async function prepend(data) {
 	if (tlComponent.value == null) return;
 
+	let note = data;
+
+	// チェックするプロパティはなんでも良い
+	// idOnlyが有効でid以外が存在しない場合は取得する
+	if (!data.visibility) {
+		const initiateTime = Date.now();
+		const res = await window.fetch(`/notes/${data.id}.json`, {
+			method: 'GET',
+			credentials: 'omit',
+			headers: {
+				'Authorization': 'anonymous',
+				'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
+			},
+		}).then(res => {
+			if (instance.googleAnalyticsId) {
+				gtagTime({
+					name: 'api-get',
+					event_category: `/notes/${data.id}.json`,
+					value: Date.now() - initiateTime,
+				});
+			}
+			return res;
+		});
+		if (!res.ok) return;
+		note = await res.json();
+	}
+
 	tlNotesCount++;
 
 	if (instance.notesPerOneAd > 0 && tlNotesCount % instance.notesPerOneAd === 0) {
@@ -89,6 +118,7 @@ function prepend(note) {
 let connection: Misskey.ChannelConnection | null = null;
 let connection2: Misskey.ChannelConnection | null = null;
 let paginationQuery: Paging | null = null;
+const idOnly = !iAmModerator;
 
 const stream = useStream();
 
@@ -97,11 +127,13 @@ function connectChannel() {
 		if (props.antenna == null) return;
 		connection = stream.useChannel('antenna', {
 			antennaId: props.antenna,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'home') {
 		connection = stream.useChannel('homeTimeline', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
+			idOnly: idOnly,
 		});
 		connection2 = stream.useChannel('main');
 	} else if (props.src === 'local') {
@@ -109,23 +141,27 @@ function connectChannel() {
 			withRenotes: props.withRenotes,
 			withReplies: props.withReplies,
 			withFiles: props.onlyFiles ? true : undefined,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'media') {
 		connection = stream.useChannel('hybridTimeline', {
 			withRenotes: props.withRenotes,
 			withReplies: props.withReplies,
 			withFiles: true,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'social') {
 		connection = stream.useChannel('hybridTimeline', {
 			withRenotes: props.withRenotes,
 			withReplies: props.withReplies,
 			withFiles: props.onlyFiles ? true : undefined,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'global') {
 		connection = stream.useChannel('globalTimeline', {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'mentions') {
 		connection = stream.useChannel('main');
@@ -144,16 +180,19 @@ function connectChannel() {
 			withRenotes: props.withRenotes,
 			withFiles: props.onlyFiles ? true : undefined,
 			listId: props.list,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'channel') {
 		if (props.channel == null) return;
 		connection = stream.useChannel('channel', {
 			channelId: props.channel,
+			idOnly: idOnly,
 		});
 	} else if (props.src === 'role') {
 		if (props.role == null) return;
 		connection = stream.useChannel('roleTimeline', {
 			roleId: props.role,
+			idOnly: idOnly,
 		});
 	}
 	if (props.src !== 'directs' && props.src !== 'mentions') connection?.on('note', prepend);