Initially I was going to create a separate backend using Express and Node.js, however - in the spirit of embracing NextJS's serverless architecture - I decided to use Supabase as my BaaS. Currently, I am querying my database within my Events.tsx component as follows:

const Events = () => {
  const [events, setEvents] = useState<any[]>([]);

  useEffect(() => {
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
    const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';

    const supabase: SupabaseClient = createClient(supabaseUrl, supabaseKey);

    async function fetchEvents() {
      const { data, error } = await supabase.from('events').select('*');
      if (error) {
        console.error('Error fetching events:', error);
      } else {
        setEvents(data || []);
      }
    }

    fetchEvents();
  }, []);

As a result of this, as you can expect, I have to render this component as a client-side component by using the "use client" keyword. If I have to do this for all components that I need to fetch data for, then would that not make NextJS's principle of using SSR whenever possible for efficiency redundant? I can understand needing to use the useEffect hook for submitting forms and the use of client side components there, however this feels like I'm unnecessarily making this component client-side.

Surely there must definitely a better way to do this that involves fetching and rendering the data on the server instead of the client, however I'm not seeing it anywhere. My confusion is exacerbated by the weird position that NextJS currently finds itself in with server actions being in alpha and scarce documentation regarding how APIs should work with the new app router (as well as, to that extent, how to efficiently make API calls).

Any help and guidance will make my journey towards creating a functional backend for my project much easier.

Thank you all in advance!