test

lib/metadata/types.ts

@@ -1,5 +1,6 @@
 import type { LineChart } from '@blockscout/stats-types';
 import type { TokenInfo } from 'types/api/token';
+import type { Transaction } from 'types/api/transaction';
 
 import type { Route } from 'nextjs-routes';
 
@@ -11,6 +12,7 @@ export type ApiData<Pathname extends Route['pathname']> =
     Pathname extends '/token/[hash]/instance/[id]' ? { symbol: string } :
     Pathname extends '/apps/[id]' ? { app_name: string } :
     Pathname extends '/stats/[id]' ? LineChart['info'] :
+    Pathname extends '/tx/[hash]' ? Transaction :
     never
 ) | null;
 

pages/tx/[hash].tsx

@@ -1,20 +1,39 @@
-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
+import type { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
+import type { Route } from 'nextjs-routes';
 import type { Props } from 'nextjs/getServerSideProps';
+import * as gSSP from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
+import fetchApi from 'nextjs/utils/fetchApi';
 
-const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false });
+import getQueryParamString from 'lib/router/getQueryParamString';
+import Transaction from 'ui/pages/Transaction';
+
+const pathname: Route['pathname'] = '/tx/[hash]';
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
     <PageNextJs pathname="/tx/[hash]" query={ props.query }>
-      <Transaction/>
+      <Transaction apiData={ props.apiData }/>
     </PageNextJs>
   );
 };
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export const getServerSideProps: GetServerSideProps<Props<typeof pathname>> = async(ctx) => {
+  const baseResponse = await gSSP.base<typeof pathname>(ctx);
+
+  if ('props' in baseResponse) {
+    const txData = await fetchApi({
+      resource: 'tx',
+      pathParams: { hash: getQueryParamString(ctx.query.hash) },
+      timeout: 1000,
+    });
+
+    (await baseResponse.props).apiData = txData ?? null;
+  }
+
+  return baseResponse;
+};

ui/pages/Transaction.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { Transaction } from 'types/api/transaction';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
@@ -31,12 +32,12 @@ import useTxQuery from 'ui/tx/useTxQuery';
 
 const txInterpretation = config.features.txInterpretation;
 
-const TransactionPageContent = () => {
+const TransactionPageContent = (props: { apiData: Transaction | null }) => {
   const router = useRouter();
   const appProps = useAppContext();
 
   const hash = getQueryParamString(router.query.hash);
-  const txQuery = useTxQuery();
+  const txQuery = useTxQuery({ apiData: props.apiData });
   const { data, isPlaceholderData, isError, error, errorUpdateCount } = txQuery;
 
   const showDegradedView = publicClient && ((isError && error.status !== 422) || isPlaceholderData) && errorUpdateCount > 0;

ui/tx/useTxQuery.tsx

@@ -32,6 +32,7 @@ export type TxQuery = UseQueryResult<Transaction, ResourceError<{ status: number
 interface Params {
   hash?: string;
   isEnabled?: boolean;
+  apiData?: Transaction | null;
 }
 
 export default function useTxQuery(params?: Params): TxQuery {
@@ -49,6 +50,7 @@ export default function useTxQuery(params?: Params): TxQuery {
       enabled: Boolean(hash) && params?.isEnabled !== false,
       refetchOnMount: false,
       placeholderData: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? TX_ZKEVM_L2 : TX,
+      initialData: params?.apiData ?? undefined,
       retry: (failureCount, error) => {
         if (isRefetchEnabled) {
           return false;