Work

Introduction site

Design
Dev

This is a profile site where I write about myself!

magic

Start the site

I’m looking for a framework that values ​​design and is easy to develop on.

The site is a front-end site that runs solely on the front-end server. Basically, it uses a web app framework called Astro.

Basic configuration of the site

The site was developed based on open source. I created my own introduction site by adding various functions to the open source and adding information about myself. It took about 15 days. While developing this site, I added concepts about js and was able to study Astro in depth.

How the site works

As described above, the site operates on a web app framework called Astro. Astro is for content-driven websites. Astro supports React, Vue, Preact, Svelte, and Solid, so it is very versatile. It is also well-optimized and has basic motion, so it was very helpful when configuring the site.

1. User request

  • When a user enters a URL or clicks a link in a web browser, an HTTP request is sent to the server.

2. Serving static files from the server

  • The server (including CDN) returns a static HTML file corresponding to the requested URL. Since a site created with Astro is basically a static site, the server provides pre-generated files.

3. Rendering HTML in the browser

  • The user’s browser parses and renders the HTML file received from the server and displays it on the screen. During this process, it fetches the style sheet (CSS) included in the HTML, applies the style, and the page is visually completed.

4. Loading and executing JavaScript

  • The browser downloads and executes the JavaScript files referenced within the HTML file. - Astro’s Islands Architecture means that if only a part of the page requires interaction, only the JavaScript required for that part is loaded and executed. For example, if there is a React component included in the page, the JavaScript required for that component is loaded and executed.

  • If there is a part of the page that does not require interaction at all, that part is processed as pure HTML and JavaScript is not loaded or only a very small amount of JavaScript is loaded.

5. Client-side interaction

  • After the JavaScript is loaded, if the user attempts to interact with the page, such as clicking or entering text, the JavaScript is executed and performs the necessary tasks.

6. Additional data fetching

  • If additional data is required within the page, the JavaScript can be executed and retrieve data from the server through an API request. This process is done at runtime, receiving data from the server and reflecting it on the screen.

7. Optimized re-rendering

  • Astro can be used with frameworks such as React, Vue, and Svelte, in which case only the necessary parts are re-rendered on the client side. The framework’s virtual DOM concept comes into play here, updating only the parts that need to change.

8. Page Transitions

  • When a user wants to navigate to a different page within your site, JavaScript can handle the page transition without sending another request to the server (client-side routing). In this case, instead of loading new HTML, it updates part of the current page to create the transition effect.
  • However, since Astro is primarily designed to be a static site, it basically fetches a new HTML file from the server for each page transition.

Summary

When a user visits an Astro site, the server serves a pre-generated static HTML file, and the browser renders this file. JavaScript is loaded on the client only when needed to handle the interaction.