How to render conditional api string depending on screen size?

[warm shard]

Im trying to conditionally render a limit for my api depending on the screen size in a server component, atm im getting error "window is not defined" can someone help?

here's my code:

import PaginationControls from '@/components/PaginationControls';
import MovieSearchBar from '@/components/MovieSearchBar';

import { getFilterdMovie } from '@/utils/api';
import MovieDynamicHeading from '@/components/MovieDynamicHeading';
import { Suspense } from 'react';
import Loader from '@/components/Loader';

export default async function MoviePage({ searchParams }) {
  const defaultLimit = 10;

  const calculateLimit = () => {
    const windowWidth = window.innerWidth;

    if (windowWidth >= 3248) return 20;
    if (windowWidth > 2923) return 20;
    if (windowWidth <= 2923 && windowWidth > 2599) return 24;
    if (windowWidth <= 2599 && windowWidth > 2275) return 21;
    if (windowWidth <= 2275 && windowWidth > 1951) return 24;
    if (windowWidth <= 1951 && windowWidth > 1627) return 25;
    if (windowWidth <= 1627 && windowWidth > 1303) return 24;

    return defaultLimit;
  };

  const limit = calculateLimit();

  const { page = '1', order = 'members', status = 'all', search = '', type = 'all', genres = '' } = searchParams;

  const orderParam = `order_by=${order}`;
  const sortParam = '&sort=desc';
  const limitParam = `&limit=${limit}`;
  const statusParam = status && status !== 'all' ? `&status=${status}` : '';
  const pageParam = `&page=${page}`;
  const searchParam = search ? `&q=${search}` : '';
  const typeParam = type !== 'all' ? `&type=${type}` : '';
  const genreParam = genres ? `&genres=${genres}` : '';
  const params = `${orderParam}${sortParam}${limitParam}${statusParam}${pageParam}${searchParam}${typeParam}${genreParam}&sfw`;
  const data = await getFilterdMovie(params);

  return (
    <div className='px-4 pt-32'>
      <MovieDynamicHeading data={data} order={order} status={status} search={search} type={type} genres={genres} />
      <Suspense fallback={<Loader />}>
        <MovieSearchBar order={order} status={status} search={search} type={type} genres={genres} />
      </Suspense>
      <MovieCardList data={data?.data} limit={limit} />
      <Suspense fallback={<Loader />}>
        <PaginationControls pagination={data?.pagination} />
      </Suspense>
    </div>
  );
}

thank you!

[mortal matrix]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[grand coral]

It is because the page will be rendered on the server and window is not available.
Could you try to do the calculation in a useEffect?

[warm shard]

So i should make the whole page.js file 'use client'; ?

[grand coral]

or try this

  const calculateLimit = () => {
    if (typeof window === "undefined") return defaultLimit;

    const windowWidth = window.innerWidth;

    if (windowWidth >= 3248) return 20;
    if (windowWidth > 2923) return 20;
    if (windowWidth <= 2923 && windowWidth > 2599) return 24;
    if (windowWidth <= 2599 && windowWidth > 2275) return 21;
    if (windowWidth <= 2275 && windowWidth > 1951) return 24;
    if (windowWidth <= 1951 && windowWidth > 1627) return 25;
    if (windowWidth <= 1627 && windowWidth > 1303) return 24;

    return defaultLimit;
  };

[grand coral]

For your case, I think this should work

ah but might get hydration error

[warm shard]

this doesnt work, it always returns defaultLimit

[warm shard]

was hoping to find a way to avoid it as im using await for fetching and stuff

i appreciate the help tho

[grand coral]

you would need useEffect with this then

[warm shard]

👍

[mortal matrix]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1191198145095409686 message)

[dull fulcrum]

it's impossible to know the screen width on the server