Merge pull request #8 from Hardeepex/sweep/i_want_to_use_ssr_in_astro…

…_project_for_m

Sweep: I want to use SSR in astro project for my api (✓ Sandbox Passed)

src/components/ApiDataFetcher.astro

@@ -0,0 +1,23 @@
+---
+import { Fragment } from 'react';
+
+export async function getStaticProps() {
+  // Define the API endpoint from which data will be fetched.
+  const apiEndpoint = 'https://api.example.com/data';
+
+  // Fetch data from the API endpoint using the fetch function.
+  const response = await fetch(apiEndpoint);
+
+  // Parse the response to JSON format.
+  const data = await response.json();
+
+  // Export the fetched data as props for consumption by other components or pages.
+  return { props: { data } };
+}
+
+const ApiDataFetcher = ({ data }) => {
+  // The component does not render any UI elements.
+  return <Fragment />;
+};
+
+export default ApiDataFetcher;

src/pages/[...blog]/index.astro

@@ -2,6 +2,7 @@
 import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
 
 import merge from 'lodash.merge';
+import ApiDataFetcher from '~/components/ApiDataFetcher.astro';
 import type { ImageMetadata } from 'astro';
 import Layout from '~/layouts/PageLayout.astro';
 import SinglePost from '~/components/blog/SinglePost.astro';
@@ -14,8 +15,22 @@ import type { MetaData } from '~/types';
 
 export const prerender = true;
 
+import type { PropsFromApiDataFetcher } from '~/types/ApiDataFetcher';
+
 export const getStaticPaths = (async () => {
-  return await getStaticPathsBlogPost();
+  // Use ApiDataFetcher to get the blog posts or other dynamic content
+  const apiDataProps = await ApiDataFetcher.getStaticProps();
+
+  // Get blog post static paths
+  const blogPostPaths = await getStaticPathsBlogPost();
+
+  // Merge blog post paths with the dynamic content's props
+  const paths = {
+    paths: blogPostPaths.paths,
+    props: { ...apiDataProps.props }
+  };
+
+  return paths;
 }) satisfies GetStaticPaths;
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;

src/pages/about.astro

@@ -1,5 +1,6 @@
 ---
 import Features2 from '~/components/widgets/Features2.astro';
+import ApiDataFetcher from '~/components/ApiDataFetcher.astro';
 import Features3 from '~/components/widgets/Features3.astro';
 import Hero from '~/components/widgets/Hero.astro';
 import Stats from '~/components/widgets/Stats.astro';
@@ -14,6 +15,7 @@ const metadata = {
 <Layout metadata={metadata}>
   <!-- Hero Widget ******************* -->
 
+  <ApiDataFetcher endpoint="/api/team" />
   <Hero
     tagline="About us"
     image={{
@@ -206,6 +208,7 @@ const metadata = {
 
   <!-- Features2 Widget ************** -->
 
+  <ApiDataFetcher endpoint="/api/locations" />
   <Features2
     title="Technical Support"
     tagline="Contact us"

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
+import ApiDataFetcher from '~/components/ApiDataFetcher.astro';
 
 import Hero from '~/components/widgets/Hero.astro';
 import Note from '~/components/widgets/Note.astro';
@@ -314,6 +315,7 @@ const metadata = {
 
   <!-- HighlightedPosts Widget ******* -->
 
+  <ApiDataFetcher endpoint="/api/posts" />
   <BlogLatestPosts
     title="Find out more content in our Blog"
     information={`The blog is used to display AstroWind documentation.