Next.js Performance Question: Optimizing Data Loading Strategy 👇

Discussions
1

Next.js Performance Question: Optimizing Data Loading Strategy :point_down:

I’m working on a Next.js app and need advice on the best approach for handling data loading in the following scenario:

:chart_with_upwards_trend: Current Flow

  1. User creates an event (data saved to DB)

  2. Response data is stored in the Recoil state

  3. The user is redirected to the event detail page

:red_circle: The Challenge

I have two distinct ways users access the event detail page:

:compass: Internal Navigation

  • User comes from event creation

  • Event data already exists in the Recoil state

  • Should use this data for instant display

:link: External Access

  • User comes from social media links

  • Need to fetch data using URL ID

  • Should be server-side rendered for SEO and performance

:red_circle: The Problem

Using a server component would be ideal for SEO and performance, but it forces an API call on every page load - even when we already have the data in the state.

:mag_right: What I’m Looking For

A solution that:

  • Uses existing state data when available

  • Only calls the API when necessary

  • Maintains good SEO

  • Optimizes performance

Has anyone solved a similar use case? What’s the recommended pattern for this in Next.js?

1 Like
2

I am not sure about your exact setup but generally server-side prerendering should be thought as a way to populate your state
So you’d want to store relevant state in the database for scenarios where users does a hard refresh/navigation, and then pass it to Recoil to warn your local state
Not sure but maybe what you miss here is a background sync between Recoil and your db? Like on every recoil state change, you asynchronously save relevant items in your db, so if user’s hit refresh you are able to reconstruct a proper state

2 Likes
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.