Support responsive breakpoints

[monolithed]

Goals

It would be nice to implement something like @solid-primitives/media and @artsy/fresnel out of the box.

Background

Currently, due to hydration issues, it's impossible to use responsive libraries effectively, just like the standard Grid.useBreakpoint from Ant Design and other.
We need a solution because developing responsive applications with Next.js is extremely difficult. I regret the time I spent investigating this problem, which shouldn't exist in the first place. I don't need SSR, but I've spent three days trying to fix issues related to this type of rendering.

Screen.Recording.2023-06-03.at.20.54.35.mov

2.mov

Proposal

Please remove SSR if it hinders application development or support responsive system out of the box

[Alexis-Bize]

I won't blame Next.js here as the Grid.useBreakpoint hook relies on the current window size (which is, of course, client only). Furthermore, Antdesign philosophy in term of SSR always seemed to be off anyway (my 2 cts).

That said, regarding your issue you should consider to:

• Disable SSR (https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages)
• Stop using Grid.useBreakpoint and rely only on md, lg, etc. properties exposed by Antd's components.
• Render your component client-side only (see below)

import { useEffect, useState } from 'react';
import { Grid } from 'antd';

const MyComponent = () => {
  const [render, setRender] = useState(false);
  const screens = Grid.useBreakpoint();

  useEffect(() => {
    setRender(true);
  }, []);

  if (render === false) {
    return null;
  }

  return <div>{JSON.stringify(screens)}</div>
};

export default MyComponent;

[monolithed]

@Alexis-Bize, your example is too simplified for a real-world application on one hand, but on the other hand, it adds a lot of unnecessary complexity to each component. It seems like this problem should be addressed by a library that can handle responsiveness, but over the course of several days, I had to familiarize myself with a dozen different APIs, search for issues discussing bugs and workarounds for each one. I truly don't understand why Next.js has so many features but lacks such a simple thing that is essential for building any modern application. It would greatly simplify the task.

Just imagine, some people are satisfied with how breakpoints work in Ant, while others choose to overlook the fact that the initial render displays the wrong state if you enter from a non-default resolution. Some people refuse to use React@18 or abandon SSR just to prevent their interface from jumping like a horse at a racetrack.

For example, I made the decision to use CSS, but that's also a very poor solution because now I can't control resolutions outside of components, and I have to dive into the internals of a component to modify rules, violating the fundamental principle of SOLID by adding business logic where it shouldn't be. Moreover, it has introduced a lot of problems with the inability to reuse code, and in some cases, I had to completely abandon certain Ant Design components like Space because they add padding wrappers even to hidden elements through CSS.
Please understand me correctly, I just want to write code instead of spending time studying extensive documentation with descriptions of bugs in every library in existence.

[CarlosSimon02]

Hi everyone, I'm facing the same issue. Has a solution been found for this?