Как оптимизированно использовать хуки в nextjs?

Question

[DudaevDenii]

Уже долгое время не могу понять использование хуков в next js. Чисто например есть компонент:

"use client"
import React from "react";
import { useSelector } from "react-redux";

function Home() {
  const variable = useSelector((state) => state.app.something)
  return <div>
    <Something variable={variable}/>
  </div>;
}

export default Home;

Этот компонент рендерится на клиенте и его дочерние элементы будут тоже рендериться на клиенте как я понимаю. И тогда пропадает ssr для всей страницы (предположим что Home вышестоящий компонент). Что обычно делают чтобы оптимизировать все так чтобы содержимое могло рендериться на сервере?

Comments

[WbICHA]

Этот компонент рендерится на клиенте и его дочерние элементы будут тоже рендериться на клиенте как я понимаю.

И тогда пропадает ssr для всей страницы

Как первое связано со вторым? Или ты думаешь на сервере только серверные компоненты рендарятся?
И да, насколько я помню, нет никаких ограничений использовать серверные компоненты внутри клиентских, но тут я не уверен, давно некст не трогал.