diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx
index 859bd67d..774d75a9 100755
--- a/front/apps/web/src/pages/_app.tsx
+++ b/front/apps/web/src/pages/_app.tsx
@@ -159,16 +159,17 @@ App.getInitialProps = async (ctx: AppContext) => {
 			? Component.getLayout.Layout.getFetchUrls
 			: Component.getLayout?.getFetchUrls;
 
+	const items = arrayShuffle(Component.randomItems ?? []);
+	appProps.pageProps.randomItems = {
+		[Component.displayName!]: items,
+	};
 	const urls: QueryIdentifier[] = [
-		...(getUrl ? getUrl(ctx.router.query as any) : []),
-		...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any) : []),
+		...(getUrl ? getUrl(ctx.router.query as any, items) : []),
+		...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any, items) : []),
 	];
 	const [authToken, token] = await getTokenWJ(ctx.ctx.req?.headers.cookie);
 	appProps.pageProps.queryState = await fetchQuery(urls, authToken);
 	appProps.pageProps.token = token;
-	appProps.pageProps.randomItems = {
-		[Component.displayName!]: arrayShuffle(Component.randomItems ?? []),
-	};
 
 	return { pageProps: superjson.serialize(appProps.pageProps) };
 };
diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx
index 077edb9e..376bfd08 100644
--- a/front/packages/models/src/query.tsx
+++ b/front/packages/models/src/query.tsx
@@ -165,7 +165,7 @@ export type QueryIdentifier<T = unknown, Ret = T> = {
 export type QueryPage<Props = {}, Items = unknown> = ComponentType<
 	Props & { randomItems: Items[] }
 > & {
-	getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier<any>[];
+	getFetchUrls?: (route: { [key: string]: string }, randomItems: Items[]) => QueryIdentifier<any>[];
 	getLayout?:
 		| QueryPage<{ page: ReactElement }>
 		| { Layout: QueryPage<{ page: ReactElement }>; props: object };
diff --git a/front/packages/ui/src/home/index.tsx b/front/packages/ui/src/home/index.tsx
index 88f9c8eb..afc5d55f 100644
--- a/front/packages/ui/src/home/index.tsx
+++ b/front/packages/ui/src/home/index.tsx
@@ -27,8 +27,12 @@ import { GenreGrid } from "./genre";
 import { Recommanded } from "./recommanded";
 import { VerticalRecommanded } from "./vertical";
 import { NewsList } from "./news";
+import { useLayoutEffect, useState } from "react";
 
 export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
+	const [isClient, setClient] = useState(false);
+	useLayoutEffect(() => setClient(true), []);
+
 	return (
 		<ScrollView>
 			<Fetch query={Header.query()}>
@@ -57,11 +61,7 @@ export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
 					<GenreGrid key={x} genre={x} />
 				))}
 			<VerticalRecommanded />
-			{randomItems
-				.filter((_, i) => i >= 6)
-				.map((x) => (
-					<GenreGrid key={x} genre={x} />
-				))}
+			{isClient && randomItems.filter((_, i) => i >= 6).map((x) => <GenreGrid key={x} genre={x} />)}
 		</ScrollView>
 	);
 };
@@ -70,10 +70,10 @@ HomePage.randomItems = [...Object.values(Genre)];
 
 HomePage.getLayout = { Layout: DefaultLayout, props: { transparent: true } };
 
-HomePage.getFetchUrls = () => [
+HomePage.getFetchUrls = (_, randomItems) => [
 	Header.query(),
 	NewsList.query(),
-	...Object.values(Genre).map((x) => GenreGrid.query(x)),
+	...randomItems.filter((_, i) => i < 6).map((x) => GenreGrid.query(x)),
 	Recommanded.query(),
 	VerticalRecommanded.query(),
 ];