How to hide sensitive server-side fetch logic in Next.js SSR

[dcorb]

In the SSR guide, and examples I have seen it's normally encouraged to re-use the same function getPosts for fetching data, both in the server-side and client-side.

export async function getStaticProps() {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery('posts', getPosts)
 ...
 }

function Posts() {
   const { data } = useQuery('posts', getPosts)

Next.js tries to encourage the idea that all your sensitive code should live inside getStaticProps, because the content of that function gets removed during the build process. This is very useful when you are using Database queries, or fetching from private BasicAuth backend APIs.

What is the recommended approach to this with React-Query ?

A naive approach to fix this would be

function getPosts() {
   if (typeof window === "undefined"){ 
   // server side logic
}

But people might not be aware that getPosts is included in the bundle that gets shipped to the frontend. Leaking this logic if you are not aware of this.

• I'm thinking of using something like this, but it doesn't seem secure to me. I think dynamic imports where not meant to be used for security purposes.

if (isServer) {
   const api = eval(`require('./lib/server-api.js')`)
   // do something
 } else {
   const api = await import('./lib/client-api.js')
   // do something
 }

• Also, putting your server-side logic behind Next.js API routes /api/server-api.js could be an option to make sure the server-fetching logic is hidden. But it seems not encouraged by the core team. The idiomatic way is to write directly your logic inside getStaticProps

Opinions?

[TkDodo]

as pointed out on twitter, I think we should change the example to use two different methods of data fetching for server and client, similar to what swr does: https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data

maybe something like:

 // pages/posts.jsx
 import { QueryClient, useQuery } from 'react-query'
 import { dehydrate } from 'react-query/hydration'
 
 export async function getStaticProps() {
   const queryClient = new QueryClient()
 
   await queryClient.prefetchQuery('posts', getPostsFromDatabase)
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }
 
 function Posts() {
   // This useQuery could just as well happen in some deeper child to
   // the "Posts"-page, data will be available immediately either way
   const { data } = useQuery('posts', fetchPosts)
 
   // This query was not prefetched on the server and will not start
   // fetching until on the client, both patterns are fine to mix
   const { data: otherData } = useQuery('posts-2', fetchPosts)
 
   // ...
 }

note that the methods are now called getPostsFromDatabase and fetchPosts to show that distinction.