2 replies

Pre-rendered page + dynamic content

I have a list of pre-rendered (at build time)

public

public

articles. But then I want to check if there is an active user session, load additional

draft

draft

articles and add them to the same article list.

Is it possible to do this server-side without relying on useEffect or React Query? Can I somehow use a Suspense on a data loading hook?

Solution

I found a way with Next.js

unstable_cache

unstable_cache

So I keep whole route dynamic, but I cache

publicArticles

publicArticles

instead:

export default async function ArticlesPage() {
  const getCachedPublicArticles = unstable_cache(
    // Cache public articles
    async () => getPublicArticles(),
    ['articles'],
    {
      revalidate: 30, // for 30 seconds
    },
  )
  const publicArticles = (await getCachedPublicArticles()) ?? []

  const user = await getUser()
  const articles = user
    ? [...publicArticles, ...((await getDraftArticles()) ?? [])] // If user is logged in, mix public and draft articles
    : publicArticles // Otherwise, only show public articles

export default async function ArticlesPage() {
  const getCachedPublicArticles = unstable_cache(
    // Cache public articles
    async () => getPublicArticles(),
    ['articles'],
    {
      revalidate: 30, // for 30 seconds
    },
  )
  const publicArticles = (await getCachedPublicArticles()) ?? []

  const user = await getUser()
  const articles = user
    ? [...publicArticles, ...((await getDraftArticles()) ?? [])] // If user is logged in, mix public and draft articles
    : publicArticles // Otherwise, only show public articles

Jump to solution

Pre-rendered page + dynamic content

I have a list of pre-rendered (at build time)

public

public

articles. But then I want to check if there is an active user session, load additional

draft

draft

articles and add them to the same article list.

Is it possible to do this server-side without relying on useEffect or React Query? Can I somehow use a Suspense on a data loading hook?

Solution

I found a way with Next.js

unstable_cache

unstable_cache

So I keep whole route dynamic, but I cache

publicArticles

publicArticles

instead:

export default async function ArticlesPage() {
  const getCachedPublicArticles = unstable_cache(
    // Cache public articles
    async () => getPublicArticles(),
    ['articles'],
    {
      revalidate: 30, // for 30 seconds
    },
  )
  const publicArticles = (await getCachedPublicArticles()) ?? []

  const user = await getUser()
  const articles = user
    ? [...publicArticles, ...((await getDraftArticles()) ?? [])] // If user is logged in, mix public and draft articles
    : publicArticles // Otherwise, only show public articles

export default async function ArticlesPage() {
  const getCachedPublicArticles = unstable_cache(
    // Cache public articles
    async () => getPublicArticles(),
    ['articles'],
    {
      revalidate: 30, // for 30 seconds
    },
  )
  const publicArticles = (await getCachedPublicArticles()) ?? []

  const user = await getUser()
  const articles = user
    ? [...publicArticles, ...((await getDraftArticles()) ?? [])] // If user is logged in, mix public and draft articles
    : publicArticles // Otherwise, only show public articles

Jump to solution

Pre-rendered page + dynamic content

Similar Threads

Pre-rendered page + dynamic content

Similar Threads

Similar Threads

Similar Threads