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

Как оптимизированно использовать хуки в nextjs? Уже долгое время не могу понять использование хуков в 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 вышестоящий компонент). Что обычно делают чтобы оптимизировать все так чтобы содержимое могло рендериться на сервере?