Astro-svelte-blog Alternatives

astro-svelte-blog reviews and mentions

• Exploring Astro and Svelte vs. SvelteKit: A comparative guide
  2 projects | dev.to | 28 Sep 2023

  Next, open your svelte.config.js file and update it with the code provided below to import vitePreprocess from @sveltejs/kit/vite. This enables us to process blocks as PostCSS:
  

  import adapter from '@sveltejs/adapter-auto';
  import { vitePreprocess } from '@sveltejs/kit/vite';
  
  const config = {
    kit: {
      adapter: adapter()
    },
    preprocess: vitePreprocess()
  };
  
  export default config;
  

  Enter fullscreen mode Exit fullscreen mode

  Extend the tailwind.config.js file by updating the content section to match the following example, which includes paths to all your template files:
  

  content: ['./src/**/*.{html,js,svelte,ts}'],
  

  Enter fullscreen mode Exit fullscreen mode

  Create a new ./src/app.css file and embed the @tailwind directives for each of Tailwind's distinctive layers:
  

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  Enter fullscreen mode Exit fullscreen mode

  Lastly, create a new layout file at ./src/routes/+layout.svelte and import the recently created app.css file within it:
  

  <script>
      import '../app.css';
  </script>
  <slot />
  

  Enter fullscreen mode Exit fullscreen mode

  These steps collectively highlight the process of installing Tailwind CSS within SvelteKit. It's interesting to contrast these steps with the corresponding procedure in Astro, underlining the differences in their respective workflows.

  Creating a Svelte component with SvelteKit

  When it comes to integrating Svelte components, the fact that SvelteKit is a Svelte-based framework helps simplify our task.

  For example, duplicating and reusing the UserCard component within our SvelteKit application is practically effortless. We can directly import the component into any page, such as .page.svelte, without requiring additional configurations.

  This straightforward method of recreating the UserCard example in our application underscores SvelteKit's innate compatibility with Svelte.

  Comparing Astro + Svelte vs. SvelteKit

  So far, we've explored the initial steps of setting up both Astro + Svelte and SvelteKit. Now, let's delve into a comparative analysis, evaluating the distinct advantages and limitations of these frameworks based on their unique attributes.

  Build and performance

  Comparing the performance of these frameworks with a basic profile page would not provide a comprehensive perspective, as their behavior might vary significantly in more complex applications.

  To get around this limitation, I created a blog application displaying blog posts from the JSONPlaceholder API. The application employs server-side rendering (SSR) for both the Astro + Svelte combination and SvelteKit.

  Subsequently, the following Lighthouse scores were recorded for the Astro + Svelte combination: In comparison, using SvelteKit generated the following scores: Analyzing the outcomes above, it's evident that both frameworks deliver satisfactory performance. Looking more closely, we can see the Astro + Svelte combination yielded the following performance metrics:

  • First Contentful Paint (FCP): 1.4s
  • Largest Contentful Paint (LCP): 1.4s
  • Total Blocking Time: 0ms
  • Cumulative Layout Shift: 0

  Meanwhile, SvelteKit delivered the following performance metrics:

  • First Contentful Paint (FCP): 0.9s
  • Largest Contentful Paint (LCP): 0.9s
  • Total Blocking Time: 40ms
  • Cumulative Layout Shift: 0

  These figures indicate that SvelteKit slightly outperforms Astro + Svelte in terms of First Contentful Paint and Largest Contentful Paint times. However, Astro + Svelte has the advantage for zero Total Blocking Time, providing smoother interactivity.

  Furthermore, the Astro + Svelte combination exhibits a higher level of consistency across both mobile and desktop platforms, which SvelteKit does not.

  You should also explore the source code for both the Astro + Svelte blog and the SvelteKit version to gain valuable insights into their distinct approaches and structures.

  Routing mechanism

  Astro is a multi-page application framework, while SvelteKit operates as a single-page application framework, leading to differences in their application scopes. Nevertheless, let's delve into their routing and page rendering mechanisms for a detailed comparison.

  Both Astro and SvelteKit utilize file-based routing. However, when working with Astro + Svelte, the process involves creating distinct Svelte components that are subsequently imported into Astro pages.

  Moreover, if your Svelte component employs client-side JavaScript, Astro mandates the specification of hydration behavior through its client directives. This level of granularity offers finer control over the hydration process within Astro.

  Furthermore, both frameworks provide SSR capabilities. However, when it comes to statically generated routes (SSG), Astro's approach stands out for its simplicity through the utilization of the getStaticPaths() method.

  For example, the dynamic route below will generate static HTML pages for each of the blog posts retrieved from the JSONPlaceholder API:
  

  ---
  // src/pages/blog/[id].astro
  
  export async function getStaticPaths() {
    const data = await fetch("https://jsonplaceholder.typicode.com/posts").then(
      (response) => response.json()
    );
  
    return data.map((post) => {
      return {
        params: { id: post.id },
        props: { post },
      };
    });
  }
  
  const { id } = Astro.params;
  const { post } = Astro.props;
  ---
  
  <h1>{post.title}</h1>
  <p>{post.body}</p>
  

  Enter fullscreen mode Exit fullscreen mode

  On the other hand, SvelteKit's implementation requires the incorporation of an SSG adapter and supplementary configuration to enable similar functionality.

  Additionally, while SvelteKit route pages exclusively process .svelte files, Astro routes can include .md, .mdx, and .html files without extra configuration.

  Data fetching

  Both frameworks present distinct approaches to data fetching within route pages. Astro enables direct access to route information and data fetching within the page file itself. In contrast, SvelteKit introduces a more separated approach:
  

  .
  └── sample-page
      ├── +page.js OR +page.server.js
      └── +page.svelte
  

  Enter fullscreen mode Exit fullscreen mode

  As depicted above, in SvelteKit, you access route information, perform data fetching, and export the required data within the +page.js or +page.server.js file. You can then access the exported data in the corresponding +page.svelte file.

  While Astro can achieve a similar level of separation, SvelteKit explicitly emphasizes this separation of concerns.

  Furthermore, when combining Astro and Svelte, fetching data from Svelte components and importing the component into your Astro pages may result in partial hydrations.

  Developer experience

  Astro's developer experience offers a significant advantage to developers with its streamlined third-party library integration. You can integrate libraries easily via the one-line installer using the astro add command.

  We previously experienced this straightforward process when adding Svelte and Tailwind to our application. It not only covers a variety of packages, but it also allows for the creation of custom integrations. SvelteKit, on the other hand, lacks a comparable feature.

  Astro also improves the development process by including TypeScript support and seamless markdown rendering. When working with SvelteKit, however, such features would typically necessitate additional configurations.

  One drawback in Astro's developer experience is that improper client directive specification in Astro + Svelte can lead to partial hydration issues and unexpected app behavior.

  Comparison table: Astro + Svelte vs. SvelteKit

  Check out the comparison table below highlighting the key similarities and differences between Astro + Svelte and SvelteKit:

  Feature/Aspect Astro + Svelte SvelteKit Routing mechanism File-based routing with Svelte components imported into Astro pages File-based routing with `.svelte` files Meant for… Multi-page applications Primarily single-page applications SSR & SSG support ✅ ✅ SSG approach Utilizes getStaticPaths() for simple SSG Requires an SSG adapter and additional configuration File types Supports `.svelte`, `.md`, `.mdx`, and `.html` files. Exclusively processes `.svelte` files. Data fetching Direct access to route information and data fetching within the page file Separated approach with +page.js or +page.server.js for data fetching Hydration Allows fine-grained control over hydration through client directives No explicit hydration control Partial hydration Allows for partial hydration when combining with Svelte components No explicit feature for partial hydration Developer experience One-line installer `astro add` for third-party libraries No built-in one-line installer for third-party libraries TypeScript and Markdown support Includes TypeScript support and seamless Markdown rendering Requires additional configurations for TypeScript and Markdown support.

  You can refer to this table to help inform your choice as you consider whether using SvelteKit or Astro with Svelte is best for your project’s scope and requirements.

  Conclusion

  In this article, we explored both Astro + Svelte and SvelteKit, delving into their respective initiation processes and distinguishing characteristics in a variety of areas.

  As you might expect, the choice between Astro + Svelte and SvelteKit comes down to the nature of your intended application and your personal preferences.

  If your project involves content-centric features such as blogs or similar scenarios, Astro + Svelte is a strong contender. SvelteKit, on the other hand, is an appealing option if your goal is to create performant, interactive applications that heavily rely on client-side JavaScript for complex interactions.

  Thanks for reading!