My first time using Directus with Astro. While in development, content is not refreshing.

[deep pelican]

Am hoping someone could shed some light on this and help me better understand.

Am following through this guide https://docs.directus.io/blog/getting-started-directus-astro.html
I have a locally hosted Directus instance with sqlite.

Editing content here: http://0.0.0.0:8055/admin/content/pages
And with VS Code working through the guide http://localhost:4321/about

I add some content in Directus, but it's not refreshing in my browser.
Typically I'm working in SSG. This is my first time tinkering with SSR. I hope I did it right?

I ran pnpm intsall @astrojs/node

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";

import node from "@astrojs/node";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind(), icon()],
  output: "server",
  // output: "hybrid",
  adapter: node({
    mode: "standalone"
  })
});

Switched between hybrid and server, but it's still not "hot reloading", as I am used to.
Same with TailwindCSS styling.

[brave void]

Hi @deep pelican. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems like you're having trouble with hot reloading while working with Astro in server-side rendering (SSR) mode. Here are a few things you can try:

1. Restart the dev server: If your installation doesn’t seem to be working, try restarting the dev server. This can often resolve issues with changes not being reflected in the browser.

2. Refresh the page: If you edit and save a file and don’t see your site update accordingly, try refreshing the page. Sometimes, the changes might not be picked up by the hot reload, and a manual refresh can help.

3. Check your Astro configuration: Ensure that your Astro configuration is set up correctly for server-side rendering. According to the Astro documentation (https://docs.astro.build/en/guides/server-side-rendering/#configure-server-or-hybrid), you should update your output configuration to one of the two server-rendered modes (server or hybrid). You've mentioned that you've tried both, but it's worth double-checking.

Here's an example of how to configure Astro for server-side rendering:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from "@astrojs/node";

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});

4. Seek help from the Astro community: If you're still having trouble, you can reach out to the Astro community for help. The #support channel on Discord (https://astro.build/chat) is a great place to ask questions and get help from the community.

Remember, working with SSR can be a bit different from working with static site generation (SSG), especially when it comes to hot reloading. It's possible that some changes might not be reflected immediately in the browser, especially if they involve data fetching from an external source like Directus.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@deep pelican kapa.ai is still learning and improving, please let us know how it did by reacting below

[deep pelican]

@brave void

  "scripts": {
    "dev": "astro dev",

i run pnpm dev and I shouldn't have to restart the dev server with every change I make ;'(
So far, that is the only solution that works.

I have refreshed the page manually y pressing F5, but that does not refresh the latest change to the database.

Maybe I am misunderstanding how to use SSR mode while in development of my project?

[brave void]

Let me check the knowledge base for you. One moment! :books:

---

Astro's development server is designed to listen for live file changes in your src/ directory and update your site preview as you build, so you typically don't need to restart the server as you make changes during development (source (https://docs.astro.build/en/install-and-setup/#work-in-development-mode)). However, there are a few things to note:

1. Hot Module Replacement (HMR): Astro's development server uses Hot Module Replacement (HMR) to update your browser as you save changes in your editor (source (https://docs.astro.build/en/reference/cli-reference/#astro-dev)). This means that changes to your JavaScript, CSS, and HTML should be reflected in the browser without a full page refresh. However, HMR might not always work as expected, especially with complex setups or certain types of changes.

2. Data Fetching: If your changes involve fetching data from an external source like Directus, these might not be reflected immediately in the browser. This is because the data fetching happens at build time, and the fetched data is not automatically updated when the data source changes. In this case, you might need to restart the dev server to see the changes.

3. Configuration Changes: If your changes involve modifying the Astro configuration or other files that require a full dev server restart to take effect, you can use the addWatchFile option in the Astro Integration API to automatically reload the dev server when these files change (source (https://docs.astro.build/en/reference/integrations-reference/#addwatchfile-option)).

If you're still having trouble, it might be worth reaching out to the Astro community for help. The #support channel on Discord (https://astro.build/chat) is a great place to ask questions and get help from the community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: