基本概念

前端：用戶界面和用戶直接交互的部分，通常用 HTML、CSS 和 JavaScript 實現。
後端：伺服器、數據庫和應用邏輯的部分，負責處理業務邏輯和數據存取。

通信方式

前端與後端的通信主要通過 HTTP 或 HTTPS 協議進行，使用請求 request 和回傳 response 模式。

HTTP
Hypertext Transfer Protocol 超本文傳輸協定，在 Web 瀏覽器和 Web 伺服器之間傳輸資料的協定，因為是通過純文字運行並且不安全。

HTTPS
Hypertext Transfer Protocol Secure 安全超文本傳輸協定是 HTTP 的安全版本，它對瀏覽器和伺服器之間傳輸的資料進行加密，確保資料的機密性和完整性。
相對於 HTTP 的優勢：

1. HTTPS 使用 SSL/TLS 加密來保護敏感資訊（例如登入憑證和財務交易）免遭攔截或篡改。
2. 使用 HTTPS 可以提高搜尋引擎排名、用戶信任度和整體安全性。

Item	HTTP	HTTPS
全名	Hypertext Transfer Protocol	Hypertext Transfer Protocol Secure
中譯	超本文傳輸協定	安全超文本傳輸協定
說明	在網路上要求傳送網頁的方式	類似 HTTP 但是增加安全性，讓資料是安全的傳送過程
圖像說明

請求方法

🔔 參考文章：
30天 JavaScript 提升計畫：從零到精通結合2024年的創新功能 - 第 11 天：API 與 Axios
後端小白自學 Laravel - 第 22 天：前後端交互 - API 開發與集成

GET：請求資源，通常用於獲取數據。
POST：向伺服器提交數據，通常用於創建新資源。
PUT：更新已存在的資源。
DELETE：刪除資源。

發送請求和處理後端回傳

在前端，可以使用 fetch 或 axios 來與後端進行通信。

後端

// routes/api.php
use App\Http\Controllers\ApiController;

Route::get('/data', [ApiController::class, 'index']);
Route::post('/data', [ApiController::class, 'store']);

// app/Http/Controllers/ApiController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiController extends Controller
{
    public function index()
    {
        return response()->json(['message' => 'Hello from Laravel!']);
    }

    public function store(Request $request)
    {
        return response()->json(['received' => $request->all()]);
    }
}

前端

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const message = ref('');

onMounted(()=>{
    fetchData();
});

// 從後端取得資料的 api 函數
const fetchData = async () => {
    try {
      const response = await axios.get('http://localhost:8000/api/data');
      message.value = response.data.message;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
};

// 把資料傳送給後端的 api 函數
const sendData = async () => {
    try {
      const response = await axios.post('http://localhost:8000/api/data', { key: 'value' });
      console.log('Response from server:', response.data);
    } catch (error) {
      console.error('Error sending data:', error);
    }
};
</script>

前端畫面渲染方法 CSR 和 SSR

使用者呈現和伺服器端呈現是用於在網頁上顯示內容有兩種方法：CSR 和 SSR，它們在 Web 應用程式如何向使用者傳遞內容方面發揮關鍵作用呢？

Client-Side Rendering (CSR，客戶端渲染)
所有的 HTML、CSS 和 JavaScript 代碼在瀏覽器上處理；初始加載時，伺服器只返回一個空的 HTML 頁面，然後 JavaScript 會在客戶端生成頁面內容。

因為是在客戶端處理，所以可以更快的頁面切換，因為不需要每次都從伺服器獲取整個頁面，但是第一次加載時間可能較長，因為需要下載並執行 JavaScript，也因為搜索引擎可能無法抓取動態生成的內容 SEO 較差。

以 Vue3.4 說明：
以下都以一個全新的專案說明，新專案建立流程可以參考Vue 元素美麗的轉變：前端小萌新勇闖套件的魔法陣 - 魔法編譯器 - vite，大致上流程一樣，只是很像轉中文版了耶！感覺開新專案更友善了！

在 main.js 和 App.vue 的組合使用中，沒有伺服器端的渲染過程，所有的頁面都在單一的 HTML 中處理，這就是 CSR 的特徵！

🔔 整個 Vue 應用都是基於 CSR 創建，因為：

• 渲染位置：
  所有的頁面內容都是在客戶端的瀏覽器中生成。
  伺服器僅提供一個靜態的 HTML 文件（通常是 index.html），然後加載 JavaScript 代碼。

• 組件的使用：
  使用 <script setup> 的組件在客戶端進行渲染。
  當用戶訪問頁面時，Vue 會在客戶端執行 JavaScript 代碼，並動態生成和更新頁面內容。

• 頁面切換：
  如果使用 Vue Router，頁面切換也是在客戶端進行，無需重新請求伺服器的完整 HTML。

Server-Side Rendering (SSR，伺服器端渲染)
頁面內容在伺服器上生成，伺服器返回完整的 HTML 頁面給客戶端，當用戶請求一個頁面時，伺服器會渲染該頁面並發送給瀏覽器。

首次加載速度更快，因為瀏覽器直接獲取資料渲染在 HTML，搜索引擎可以輕易地抓取完整的 HTML 內容，對於 SEO 更友好，不過...伺服器負擔較重，因為需要處理頁面的渲染。

以後端小白自學 Laravel - 第 13 天：前端 Vue3 搭配後端 Laravel 9.x說明：
這篇 SSR 的關鍵部分在伺服器端處理請求，在 routes/web.php 文件中加入一個路由來顯示 Blade 模板，模板中直接引入掛載 Vue 應用，這些內容在伺服器上生成並發送到客戶端。

　🔔 Summary
　CSR： 在客戶端渲染，適合互動性強的應用，但首次加載時間較長，SEO 友好性較差。
　SSR： 在伺服器渲染，首次加載快且 SEO 友好，但頁面切換速度較慢且伺服器負擔重。