DevFlow

DevOverflow

Search
Menu
DevFlow

DevOverflow

Home menu icon

Home

Community menu icon

Community

Collections menu icon

Collections

Find Jobs menu icon

Find Jobs

Tags menu icon

Tags

Ask a question menu icon

Ask a question

    Menu

    Top Questions

    How to center a div?

    chevron

    How to do code parsing with React.js and NextJS?

    chevron

    How to get better at Nextjs?

    chevron

    Postgres: upgrade a user to be a superuser? ?

    chevron

    This is another test question

    chevron

    Popular Tags

    nextjs

    6

    React

    4

    next.js

    3

    reactjs

    3

    css

    3

    Profile

    Juan Cruz Cáceres

    upvote

    0

    downvote

    0

    star

    Can You Refresh the Server Side Data on Each Route Change in Nextjs App Router?

    clock icon

    Asked 10 months ago

    message

    0 Answers

    eye

    1 Views

    I want to fetch this data every time the user accesses the route so that the data is always fresh. Below is a simple example. I think it's not possible.

    I have tried:

    export const revalidate = 0;
    export const dynamic = 'force-dynamic';
    export const fetchCache = 'force-no-store';
    cache: 'no-store'
    

    I want to use SSR but I also need the data to be dynamic as it changes a lot and the user should see fresh data each time the access the route.

    // app/test/page.tsx
    import React from "react";
    
    export const revalidate = 0;
    export const dynamic = 'force-dynamic';
    export const fetchCache = 'force-no-store';
    
    interface User {
        id: number;
        name: string;
        username: string;
        email: string;
    }
    
    export default async function UsersPage() {
        console.log('Fetching users...');
    
        const response = await fetch('https://jsonplaceholder.typicode.com/users', {
            cache: 'no-store',
        });
    
        if (!response.ok) {
            console.error('Error fetching users:', response.statusText);
            return <div>Error fetching users: {response.statusText}</div>;
        }
    
        const data: User[] = await response.json();
        console.log('Fetched users:', data);
    
        return (
            <div>
                <h1>Users</h1>
                {data.length ? (
                    <ul>
                        {data.map((user) => (
                            <li key={user.id}>{user.name}</li>
                        ))}
                    </ul>
                ) : (
                    <p>No users found</p>
                )}
            </div>
        );
    }
    React.js
    next.js

    Write your answer here

    0 Answers